Report from EmberJS Pro workshop 2017
Recently, we took an awesome business trip to Berlin. Mike North from Simplabs, an experienced Pluralsight author, and Ember contributor gave a great Ember workshop and we were lucky enough to see a talk by Tom Dale. Surprisingly, there is a Eurocity train which goes from Budapest, via Bratislava, Brno, and Berlin all the way to Hamburg. We traveled from Brno to Berlin 7 and a half hours straight. The time we spent in the train was totally worth it because Berlin is a fascinating city.
On our way to a hotel, we were lucky to see the incredible building of parliament. The building was opened in 1894. After World War II felt into disuse and was fully restored in 1999.
Building of parliament
Our apartment was near the famous Brandenburg Gate, which is an 18th-century monument. It’s built on the place of a former city gate. One can find a lot of embassies, fancy hotels, and boutiques in that neighbourhood. The gate is really massive and you can see a big wagon pulled by 4 horses on top of it.
Brandenburg Gate
The Workshop
The workshop aimed at rather experienced Ember developers, but one could complete all exercises and learn a lot even with limited knowledge of the framework. We went through the bootup process and learned about initializers and instance initializers. How deferReadiness and advanceReadiness work and what we could achieve using these methods, or to be more exact, what will happen if we don’t use them correctly.
The way most of the frontend frameworks work is that once the user makes a request to display some page, the server will return almost empty index.html file with external CSS and Javascript definitions and no content. Browser engine will parse the file and figure out all external files to download, including Ember specific javascript and custom javascript of the application itself. Only after that will the application parse and execute the javascript and download some content, which will be imported into the body tag, from our API. This process may seem cumbersome and a lot of time could be saved with some optimization. That is why server-side rendering (SSR) was born. If you enable SSR, most of the work could be done on the server, which means that the initial index.html file won’t be empty, but will include the content right away. This saves a lot of time and vastly reduces the time to first render. In order to enable SSR in Ember, you just need to install a plugin called Fastboot. Just like that, you can benefit from the server side rendering and vastly reduce the loading time of your application.
Service workers is another topic we spent quite some time with. Service worker is a script that your browser runs in the background. It enables you to send push notifications, sync data or provide a rich offline experience by intercepting HTTP(S) requests. There is a great plugin called ember-service-worker, which enables you to benefit from different caching strategies, like asset-cache or cache-fallback. These strategies are defined in additional plugins which are easily configurable.
On top of that, we covered topics like ES2015 modules, IndexedDB, state management, Ember concurrency and created our own Broccoli plugin.
At the workshop
Meetup with Tom Dale
We were lucky enough to attend Ember Berlin Meetup where Tom Dale himself gave a talk about the future of frontend frameworks. In his opinion, frontend frameworks should work as a compiler and provide the best possible user experience both in developed markets and emerging markets. Tom Dale is one of the creators of Ember and he lately joined LinkedIn which has bet big on Ember. Tom has also talked about Glimmer, a UI library and part of Ember. Glimmer uses Handlebars and allows you to create component-based UIs. Glimmer is a real game changer and I’m really happy to see Ember going that path.
Tom Dale speaking
To have a full German experience, we stopped at a local Getränkemarkt to buy a few beers. Our fellow developers at home are looking forward to trying them all.
