Angular Talks Meetup #6
Written by Gareth Dunne @jsdiaries
The Foundry, Google
Angular Meetup is the first conference to be featured on this blog. It was a 2 hr Angular conference with four speakers. They discussed different features of Angular 2, highlighting the advancements from Angular 1, as well as some of its architectural patterns.
Introduction to Angular 2
Simona, an ambassador of the group Women Who Code, she discussed the components of Angular 2. She focused on Input and Output decorators, used for emitting signals in Angular 2 applications to detect changes. Because Angular 2 is a reactive framework, change detection is of huge importance.
The flow of data from top to bottom is another important characteristic of Angular 2. What I found most interesting is that an Angular 2 application will have a faster initial render because it is compiled at run time. Another word for this is “ahead-of time” compilation.
She also mentioned other helpful tools such as the Angular CLI. This helps to scaffold the application by generating components, directives etc. I am currently using this CLI in my Whiskey shop application. I find it incredibly useful that I can generate 3 or 4 files in one component from just one command “ng generate component_name”.
There are many other cool commands that help with boiler plating some other aspects of the application.
To finish, she recommended using Protractor for end-to-end testing in Angular 2. You can find that here. http://www.protractortest.org/#/
MVC is dead!
Fabrizo addressed the differences in default two-way data-binding in Angular 1 and Angular 2.
It is inefficient to have constant callbacks from parent to child elements if no data needs to be reciprocated from parent to child elements. Instead, the child node can update a function that invokes methods based on the changed information.
The value of this is evident because the constant unnecessary callbacks in Angular 1 to parent elements hinder the application. This is because a one child element can be linked to multiple, ambiguous parent elements. Fabrizio also talked about how MVC is now on its way out regarding new emerging frameworks such as Angular 2.
The windowing technique
Danilo’s talk was my personal favorite, maybe because I found the content most relatable.
He focused on a window technique where the window only displays data that is inside the constrains of a specified container size. He put the question to the audience – why would you bother rendering data in a window that is not being viewed?
I found this technique intriguing and seems like such a simple way to improve performance in an Angular 2 application. The view gets restricted and recycled. Danielo showed the math formula required to calculate the limited windows that are displaying this changing information. These calculations are invoked on a scroll event in Angular 2.
See his presentation on the windowing technique here.
Building Angular 2 (from MB’s to KB’s)
Thomas Horvath – Lead Frontend Developer at Xplosion Media –@criticalpix
Thomas presented how webpack can compile our Angular 2 files and compress them into a size suitable for a production environment. In his example, his output for the Angular 2 application was reduced from 2.5mb (an unsuitable size for a typical production environment) to 150kb.
This is a significant change in the webpack module file. Possibly the most important aspect of this was webpack taking our common JavaScript code and putting it in commonJS.
This compression alone led to a significant reduction in the size of the application to be loaded in the network. Webpack also treeshakes your application to compress the size of the output. Thomas said that this is not fully functional for production environments. However when it does work, the reduction in size can reach as low as 150kb.
This event had the highest attendance of all the previous Dublin Angular events so far. I found it was very insightful to have four different perspectives on this new framework that is only really two months old.
While some of the techniques were more advanced than my current knowledge, I can see the advantages of implementing them in my Whiskey shop application, currently under development. I will be sure to feature this Whiskey shop on here soon, with the end-goal of making it open source. Please feel free to be critical of anything I post, factually or technically. It will help getting this blog off the ground long-term.
So feel free to level your criticisms at me akin to folks on webdev subreddit. 🙂