ngEurope

hugoparis19

ngeurope

I attended two weeks ago at ngEurope in Paris, Europe’s first AngularJS conference.  Can you imagine a two-days conference with the father of AngularJS, Tech Leads & Core Team, several communities (Ionic, Restangular, UI-bootstrap, ngAnimate…) and so much more…. This was the promise and I have to admit that this challenge was fully completed.

Around 800 people, mostly developers, were present at the conference. It was not just another French conference on AngularJS but a real European conference with skilled developers, the Core Team, all the communities, … it was even quite difficult to find some Frenchies in fact.

To summary, the conference was a delicious mix between new features announcements, best practices and communities messages. AngularJS is evolving fast, very fast and it’s commonly adopted to use an oss project started six montth earlier. It’s sometimes difficult to find the ‘Angular Way’ to do X or Y, and thanks to this conference we know where we are and where we will go.

You can find so many MVC/MVVM/MVW Javascript frameworks. Why AngularJS ? There are many reasons to choose it but one another reason is that Google believe in AngularJS. Several teams are currently involved in this Framework, tools, writing best practices, …  and many google products are developed using this framework, around 1600.

One particular announcement from the Core Team was quite surprising: AngularJS 2.0 will be « drastically different looking ».

Our favorite session : AngularJs from Scratch by @Swiip. How would you re-implement angularJS code binding system by yourself ? As he said, advanced developers don’t like magic. At some point we all love to understand how it works under the hood. We liked it. The code is available here.

The most cray session : a livecoding session by @andrewtjoslin on Ionic Framework. Vi at godspeed !

Here is the complete list of session, with a very short summary. It’s sometimes difficult to describe a session in two lines, so that’s why I encrouge you to view sessions on this youtube channel.

The conference starts with one of the most impressive conference beginning of all times :  a song from Judy Tuan (Google dev team) about AngularJs. What an impressive contribution !

  • Igor Minar & Brad Green – Keynote

The two leads of AngularJs started by showing the exponential popularity of Angular. Netflix, Hbo, Amazon kindle management are using it for example. Many Thanks not only to the google team but also to more than 1000 contributors on GitHub. And they insisted that this is a complete ecosystem with book writers and online teachers (egghead, pluralsight, code school). After, They discussed the new features of AngularJs 1.3, which was just released. They covered a bit other topics, Material Design integration, Ionic. And the 3 things they are focusing on for AngularJs 2.0: Mobile (material design, improved router, animation + touch), Performance, Scale and keep only the best parts of 1.X !

This session was a good recap about the changes in 1.3. This version add many perf improvements, new features and new modules : A new production mode is available, there is now a one-time binding, a new way to work with forms (ng-message, ng-options), ….

A new tool was developed (Benchpress)  to run micro benchmarks on Js code and AngularJS. Some results (1.3 vs 1.2):

  • dom manipulation is 4.4X faster
  •  digest is 3.5X faster

They advised us to use ng-annotate  : this node module automatically write the « injects » for the uglyfication.

Ionic is a very popular framework on the top of AngularJs and Cordova to make easy to build –hybrid- mobile apps. Everybody had a good opinion about it and the team is involved in many angularJs projects. Andrew insists that they will not focus on webapp but only on app.

What an incredible live coding session with VI ! Andrew has created a mobile app in 20 minutes: new world record ! He has also mentioned http://www.genymotion.com/ to test your app on multiple Android devices.

  • Victor Berchet & Rado Kirov – AngularDart under the hood

They presented the DART implementation of AngularJS. It’s not just another port of Angular but  the new language derived from the Google language DART. They explain how it works, but it was too theory. So what is the interest of using AngularDart ? …

  • Vojta Jína – Can We Learn from Architects?

How to be proud of our code ? How can resist our code to years (centuries) ? We should get inspired by the architects because designing buildings and software do have a lot in common. Especially developers/architects should use more maths ! By the way, using pure functions (no side effects) and immutable objects would help.

Apache Cordova is a set of APIs that allow a mobile app developer to access native device features such as the camera or accelerometer from JavaScript.  Cordoba CLI is awesome for developers; Julien sets up an app and runs it in matter of minutes. He did a demo explaining a bit the workflow and debugging with Dev Tools. Ionic team released ngCordova to access Cordova device services with Angular. Notice that it’s easy to mock the Cordova service.

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. The angular material project is the implementation for Angular.There is one for polymer. The final version should be realeased in few weeks. Notice that the grid takes care of the complexity of flexbox.

  • Pete Bacon Darwin – Dgeni – Documentation generation on steroids

We all love a well-documented API but we hate writing doc and update it ; this is why we need Dgeni ! This tool generate the doc by looking annotations and trying understanding by itself the code. It is fully customizable and be easily integrate in a build process. Many projects (ionic, angulardoc, …) use this tool to generate documentation.

  • Julie Ralph & Chirayu Krishnappa – Protractor and the Testability API

A short presentation on Protractor, the AngularJs end- to-end test framework.

They advised to write page objects, to be re-used in different pages, the test should handle too much business logic. They mention the famous trick to debug : browser.pause() 🙂

You can also disable angular animations to speed up the tests.

Rob is in charge of re-building a new router for angular. To design this new routers, he will try to take best parts of each routers available in another techs. The big new features are :

  • dynamic loading
  • the child apps (we can have several routers ! the feature encapsulate the routing too)
  • parallel controllers (map a single route to multiple controllers)

This router is planned for AngularJS 2.0, but is going to be ported to 1.3 (no release date).

  • Pawel Kozlowski – ui-bootstrap

The topic of the presentation is more the philosophy behind ui-bootstrap than the library itself. They want to build a flexible, customizable API by writing small composable directives and breaking the rules when needed.

Really awesome demo ! Mathieu write in 15 min the basics of angularJs : $watch , $digest/$apply , $compiler. There is no magic !

Oliver is a developer at Work & Co, and leads the front-end architecture of a responsive redesign for virginamerica.com. He explains that Virgin America is a unique airline that should deserves a unique presence on the Web. They built a new website based by beta-testing on customers, not by coping other companies websites. They developed complete css frameworks for everything-first (totally responsive). That was a really good post-mortem of this project.

  • Lightning talks contest

api for bootstrap

easy service mocking

easy pagination

build system

Miško Hevery, father of AngularJs, showcasing AtScript, built on top of TypeScript. AtScript is a superset of TypeScript. He wants to create a better API for AngularJS 2.0 and he needs new language features so why not build the future now ? types, annotation and introspection will end up in ES7 anyway. AJS 2.0 will be written in AtScript, but won’t require you to write anything in AtScript. If you want, you can still work in JavaScript (ES5). When writing AtScript, you need to process your .ats files with Traceur () to generate valid ES5.

AngularJS 2.0 will be very different. No more controllers, directive definition objects, $scope, modules, jQlite, … They really want to ease AngularJs learning curve. The syntax for the html will be different but similar to some points. They also present a new profiling tool for chrome.

Zack Brown showed how to do complex animations with JavaScript achieving the same behavior in the browser than that of the native applications.

He thinks the web apps have limited performances in comparison of native apps due to CSS boundaries. Rich interactions which users expect from today’s mobile apps – are fundamentally better suited to imperative animations (Turing-complete animation logic) than to declarative animations (HTML selectors).

The next version will provide a simpler API.

Douglas from SFEIR explains how he tries to integrate W3C Web animations ( http://www.w3.org/TR/web-animations/ ) into AngularJs.

Martin is the father of the popular library Restangular. He explained why he started building this library on top of $resource and discussing the main concept of Restangular. He plans for the future: Decoupling the one large Restangular.js file into separate modules, Using model classes, Hooks: he’s not sure about it yet, Custom configuration, …

ES6 is the next version of ECMAScript. It will facilitate coding but it isn’t integrate to our browsers ( http://kangax.github.io/compat-table/es6/), so the solution is to use Traceur to generate valid ES5 code. In that way, we will be able to use ES6, AtScript, … and AngularJS 2.0 as soon as it will be released.

  • Matias Niemelä – Animations (sequencer, web animations)

Matias  is the author of http://www.yearofmoo.com/. He talked about the basics of ngAnimate and demonstrated how ngAnimate actually works. With AngularJs 1.3, there were any bug fixes, and improvements. He is also working on integration with material design Check it out, It seems so easy to use animations!

Angular follows traditional software and OO patterns. Services are often used as singletons and are good for caching data at app level, façade for browser/3rd parties APIS, … Thanks to DI it’s very easy to switch between implementation, mainly for testing. Data-binding is more or less an implementation of the observer pattern. But watch out some famous anti-patterns :

  • War and peace controllers => They’re too long. Keep only the business logic in, and move the rest into services for example.
  • Lin function of doom => putting all the code to drive a complicated directive inside the link function
  • Magical Prototype Chain Dependency
  • …

To summary, focus less on « is this this the angular way? » but more on »Is this good software? »

In this great presentation, Dave give us advices and recommendations on $q ; promises is a creditable alternative to callbacks (and the callback hell). Notice that it can be parallelize with $q.all, Composable (easy chain promise, use continuation), dynamic , .. and so more. Deferred should be use internally, the receiver should only see the promises. And never forget to put the second function to handle the reject : promise.then( function happyPath() {…}, function handleError(){ … });

How do you secure your AngularJS application today? Instead of Cookies (coupled to the web), use  Json Web Tokens ! The session was mainly a live coding session and how to integrate jwt into an angularjs app, thanks to the angular-jwt module.

Brian would like to develop a new tool to help us to fix common errors while developing an Angular application. Here comes ngHint (list unused modules, deprecated apis, naming conventions …) .  He is also working on a new version of Batarang (chrome extension, not updated since 2013). It’s still WIP, but there will be more features and it will be more user-friendly. ngHint will be integrated too.

Laisser un commentaire