How can we help?

Design? Check. Strategy? Check. Bulletproof code? Check! People who can manage it in an agile and efficient manner? Check. Someone to help you create your next big product? Of course.

Denver

- 1201 18th St. Suite 250, Denver, CO 80202

Grand Rapids

- 125 Ottawa Ave NW Suite 270, Grand Rapids, MI 49503

Blog

BLOG:Ng-conf 2016 Highlights

Ng-conf 2016 Highlights

For the last three years, a developer conference centered around Angular has been held in Salt Lake City. I recently returned from ng-conf 2016 and wanted to share a few highlights from the conference. Ng-Conf was expanded to three days this year and had a sell-out crowd of 1,500 attendees.

Over the past year, much of the discussion around Angular has revolved around Angular 2 (ng2) which was first released in beta form in December of 2015. Development of Angular 2 has moved to a point where much of the APIs have solidified and the code is now in release candidate form. However, the Angular team still has some features they are working on to round out the product before it is officially released. I’ll have a few more details on that later in this post.

The conference was kicked off by Brad Green who is the Google Engineering Director for the Angular team. Brad talked about three main points that Angular 2 covers - Performance, Productivity, and Versatility. Most of the presentations given at the conference fit into one or more of these categories so I’ll present the highlights in these same categories.

Productivity

Angular 2 offers some new tooling in the area of command line tools along with enhanced debugging tools, documentation, and animation services.

Angular Style Guide I’ve commented on the excellent Angular 2 documentation in the past. Now, that documentation is being enhanced even further. John Papa’s Angular 1 style guide has become quite popular and is endorsed by the Angular team. However, it didn’t appear until Angular was out for several years based on various experiences people had with Angular 1 development projects. Interest in an Angular 2 version of that style guide came almost as soon as early alphas were available for Angular 2. It’s pretty tough to write a style guide for a moving target, but now that the framework APIs have stabilized some best practices have become apparent and a style guide is being developed. This time, it’s part of the official Angular docs. While the style guide is not yet as comprehensive as the one for Angular 1, it’s already serving as the basis for related tooling like the Angular CLI discussed below. I’m happy to see this so early in the Angular 2 lifespan as it will help developers structure their code in a consistent manner.

Angular CLI A team has been working on a command line tool for Angular designed not only to speed up the development of new applications but also provide useful tools for the ongoing maintenance of an application. The CLI project can be found here and provides command line tools to perform the following tasks.

  1. Create new projects - The ‘ng new’ command not only sets up an initial directory structure based on Angular’s new style guide but also sets up an appropriate tsconfig and package.json file. In the past, getting an Angular 2 project off the ground took a bit of effort or searching for an appropriate ‘starter’ project on GitHub. The new command line tool will go a long way towards ending developer frustration with this process.
  2. Add components to an existing project - The ‘ng generate’ command can add components, services, routes, etc. to an existing project. Again it’s a great way to get started and ensure that you’re following the Angular style guide for the structure of your project.
  3. Testing tools - The CLI supports both unit tests using the Karma test runner along with end-to-end functional testing via Protractor.
  4. Development server - a lightweight HTTP server supporting live reload is included.
  5. Deployment - self-contained Angular projects can easily be deployed to GitHub pages or Firebase hosting.

Codelyzer Related to the style guide is another project called Codelyzer. This is a project that utilizes tslint to perform static code analysis on your Angular 2 typescript projects and lets you know if there are deviations from the Angular 2 style guide. The report it produces is interactive in that you can click an issue in the report and the Angular style guide will open to the relevant section. Since the style guide is still being developed, Codelyzer is likely to change significantly over time as more rules are added.

Angular Augury Angular 1 has a popular Google Chrome extension known as Angular Batarang which is used for debugging/inspecting Angular apps. For Angular 2 a new extension is being developed called Angular Augury. Augury does a great job of letting you inspect the state of components you build in Angular 2. You’re able to examine the components internal state as well as the inputs, outputs, and dependencies of the component. You can manually trigger component output event emitters. An injector graph shows the relationship between the component, the injector, and other injectables. There is also a component hierarchy viewer that lets you examine the component hierarchy and routes. Augury is already quite useful and the Augury team has a number of additional features in development that will make it part of any serious Angular 2 developer’s toolbox.

Animation The present release candidate for Angular 2 is missing the animation support that accompanied Angular 1. The ng-Animate project has been completely revamped to support Angular 2. It’s no longer performing CSS animations using transitions and keyframes based on an enter/leave class name approach. Instead, you define “states” on your component and then bind expressions which return state values causing animations to run. Everything is now based on web animations and utilizes the web animations polyfill for execution on browsers that do not yet support web animations natively. Right now only Chrome and Firefox have native web animations support. The Angular team has also created a lighter weight version of the polyfill which will ship in a future release candidate.

To see the animations in action it’s worth watching this video. The slides for this presentation are also online along with the demo code. I was impressed with some of the new features like automatic styling that let you animate formerly difficult things like height:auto in CSS. There’s also support for grouping and staggering animations. Components can subscribe to events on the animations to know when they are complete or even control the position of the animation timeline. The animations support is still finalized and should be out in a release candidate within a few weeks.

Performance

A big emphasis is being placed in Angular 2 on performance. Those who have been reading about Angular 2 over the last year already know about the new change detection process and its impact on improving performance. However, the Angular 2 team has been working on many other ways to boost application performance.

Offline Compilation In Angular 1 all templates are dynamically compiled on the client-side at runtime. The Angular 2 team has been working on a way to perform offline compilation of templates so this compilation step can be performed once, during the application build process. The result nets you two benefits.

  1. A smaller application: By compiling the code as part of a build process the template parsing and compiler are not needed at runtime and the size of the runtime can be greatly reduced. A tree-shaking tool such as Rollup.js is used to strip away any unreferenced code. Using these techniques the Angular team showed examples of a drop from 170KB down to 45KB. That makes Angular 2 actually smaller than Angular 1.
  2. A faster application: Less Javascript means there’s less code to parse and therefore a faster app startup time. Also by pre-compiling the templates these don’t have to be loaded and parsed dynamically which further improves startup speed.

The offline compilation features are not ready for general use as part of the RC1 release, but will be available in an upcoming release candidate. The Angular team is committed to finishing this feature before officially releasing Angular 2.

New Component Router with Lazy-loading Routes The Angular team added a new component router in the RC1 release. This new version is intended to easily permit portions of your application to be dynamically loaded at runtime. When a user visits various paths in the application the component hierarchy for that path is dynamically loaded. This allows you to load portions of your app like admin or reporting functionality only when needed. The result is a faster initial load time and less network traffic because we’re only loading the parts of the app that the user is visiting.

Web Worker Support In the past, all Angular operations were single threaded. With the DOM dependencies in Angular 1, it wasn’t practical to move many operations to a web worker because web workers cannot manipulate the DOM from a background thread. However, with Angular 2’s new architecture of decoupling DOM accessing, it is now possible to perform quite a bit of application logic and rendering logic inside a web worker to improve application responsiveness. This feature was first presented at AngularConnect back in October 2015. Rather surprisingly, web worker support can be enabled just by changing a few lines of code in the bootstrap process to load much of your application logic into a web worker than the main thread of the app.

Server Side Rendering This is accomplished via the Angular Universal project. Server side rendering provides several benefits.

  • Initial page load speed - Server side rendered pages mean that the user doesn’t have to wait for the data and JS to load client side in order to see page content.
  • SEO (Search Engine Optimization) - While Google’s web crawler can index Javascript driven sites, several other search engines still can’t properly index pages running Javascript. Even for the web crawlers that do execute Javascript it can be difficult to determine how much content they really are able to index.
  • Social links - Sites like Facebook pre-render page snippets based on the raw HTML they receive at the specified URL. This is what appears as a preview image on a site like Facebook when you link to a page. If your site is driven by client-side Javascript, typically very little, if any, content will appear in the preview.

In the past, doing server side rendering of a Javascript app was very difficult. Angular 1 had tight DOM coupling which meant it could not be run without a browser on the server side. The new architecture of Angular 2 now makes generating HTML possible without an actual browser. Another area that is a challenge for server side rendering is async Javascript. How do we know when all the AJAX requests that a page might make are complete so we can send the final HTML back to the client browser? Angular Universal leverages ng2’s use of zone.js to determine when async calls have completed and a page can be returned back to the client browser. Originally Angular Universal required a Node Express application on the server in order to function. There are now some additional projects springing up to allow Angular Universal to be coupled with ASP.NET, PHP, and Java-based projects as well.

There is still a lot to learn about how best to use this technology. Running large client apps on the server side can be resource intensive. There are ways to combine Angular Universal with CDNs to cache pages that are not user specific. Using this approach, many pages can be pre-built and cached without generating the content for each user. Angular Universal is a fairly large topic and the project is still very much under development. We plan to have articles on our blog in the future to further discuss what you can do with Angular Universal and some considerations for using this in various contexts.

Versatility

A number of supporting projects have sprung up around Angular 2 to leverage its new features and migrate existing frameworks/libraries to the Angular 2 platform.

Angular Mobile Toolkit The mobile toolkit is based on the concept of progressive web applications. This is a strategy for making web applications function more like native mobile applications depending upon platform capabilities. The toolkit brings with it the following capabilities…

  • Instant loading - This leverages Angular Universal to render the page initially on the server side. As an alternative, the mobile toolkit provides some tooling to create an “app shell” which is a partial rendering of a shell of your application so some content renders immediately when the page loads. The toolkit also utilizes Service Workers to initially load and cache content on the client side so that future page loads can be nearly instantaneous. The mobile toolkit is supported by the CLI project and can automatically create service worker code for you along with a manifest.appcache file to support those browsers which do not yet have service worker support (namely Safari on iOS & OSX and Internet Explorer).
  • Installable - This uses the web app manifest file to “install” the web application to their application launcher much like a native app. The manifest controls whether the browser “chrome” appears on the app as well as the launcher icon, title, and supported device orientations. Unfortunately, the manifest is not yet supported by iOS and is being considered by Microsoft. As a result, this is really only a solution that can be leveraged on Android devices running Chrome at the moment.
  • Notifications - A common desire in mobile apps is to leverage the push notification support on the device. Chrome has made this available since early 2015, but as of yet, the other platforms like iOS have not offered similar capability. I used Chrome Push notifications in a recent IoT project and found they worked quite well. It’s disappointing that the iOS platform is behind in this area, but hopefully, Apple will embrace this in a future version of iOS.

The concept of progressive mobile apps is a powerful one and it’s nice to see Google provide tooling in this area. Sadly the reach of these solutions will be limited until other mobile platform vendors begin to support these capabilities. In the interim, they can be considered techniques to progressively improve the experience for those of your users whose device platform can support the new features. Come to think of it I guess that’s the whole point behind the word progressive.

Angular Material 2 The Angular Material project for ng1 has been popular and I talked with several people at the conference that have been using it. Given the new structure behind ng2, the Angular Material project had to be completely rebuilt. A new Angular 2 Material site has been created to showcase the new project. This is still an “alpha” project and only the base level components have been completed. The Angular Material team hopes to have a release candidate version out by late 2016 with a complete set of components. Angular Material will be adding things like date pickers, menus, sliders, autocomplete, virtualized lists, etc before its final release. Also in the works is a component toolkit that will allow developers to leverage the Angular Material infrastructure to build their own components and optionally contribute them back to the community. Longer term plans include advanced controls like rich text editing that are slated to appear in 2017

Nativescript The Nativescript project first appeared in early 2015 around the same time React-Native made its debut. Nativescript is a product of Telerik and enables developers familiar with Javascript to write native mobile apps for iOS and Android. The product seemed quite popular with attendees judging from everyone wearing blue Nativescript t-shirts all over the conference. Nativescript has a major unique capability not found in PhoneGap, React-Native, or Appcelerator Titanium. Like other frameworks, a platform independent abstraction for commonly used mobile controls is provided. However, the Telerik team managed to make the full native platform APIs directly accessible from Javascript. This exposes the native properties and methods on the underlying controls themselves. Now it’s not necessary to start writing lots of native code in XCode or Android Studio if you want to tweak a behavior that an abstracted control does not already support. Additionally, all the source code for the Telerik controls are available in Javascript so the components can be extended and modified if needed.

Over the past year, Telerik has been working with the Angular team to add Angular 2 support to Nativescript allowing web developers familiar with Angular 2 development to also write native mobile apps. The Angular 2 support was officially announced at ng-conf 2016. I was able to attend a Nativescript workshop while at the conference and proceeded through a very well done “getting started guide“ written for Angular 2. Having worked with Nativescript before, I was impressed on how the Angular and Telerik teams hooked these together. Nativescript already has a Javascript-based animation API that provides high-performance native animations. They are now working with the Angular team to support Angular 2’s animation APIs in Nativescript as well. Web developers already familiar with Angular 2 should find the process of coming up to speed on Nativescript relatively easy.

React-Native has been very popular in 2015, but I think with the addition of Angular 2 support, the profile of Nativescript will rise considerably this year. I’m looking forward to taking a small Nativescript app I’m already working on and porting it over to Angular 2. I’ll be writing a future blog post to outline how that goes.

Ionic 2 The Ionic team has been busy working on Ionic 2 which is the ng2 version of Ionic. Along the way, Ionic has been completely re-architected. At the conference, there were no general sessions on Ionic, but there was a workshop session. Ionic’s involvement with Angular was called out by Brad Green during the keynote, acknowledging that the two teams have been working closely to ensure success with Ionic 2. In fact at last year’s ng-conf, the Ionic team announced they were already working on Angular 2 support. Lots of progress has been made on Ionic 2 and the framework docs are a clear testimony to that.

Summary

Given time and space restrictions, I could not cover every presentation offered at the conference. Many of the sessions are available on the ng-conf YouTube channel. Hopefully, this article has illustrated the amount of attention that not only Google, but many other companies, and individuals are paying to Angular 2. As I stated in a recent blog post on Angular 2 this is really like a brand new product. Everything is new about Angular 2 from the APIs to all the tooling. Big changes like the component router and the new animation support show a significant departure from the ng1 ways of doing things. It’s clear that the remainder of 2016 will be a time of learning and transition. While that may worry some folks, remember we’re all in this together. I’m already quite pleased with the caliber of the Angular documentation aimed at helping developers migrate to Angular 2. If you like learning new things, Angular 2 and it’s related projects will certainly provide a lot of opportunities.