Products

Solutions

Resources

Partners

Community

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Waiting for Angular 2 Dev Workflow and Tutorials

Angular 2 was released in September 2016, so you may wonder why little has been posted in the DNN Ecosystem. We're still waiting for something - here's a status update.

Version-Status January 2017

Rundown of the current Versioning:

  1. Naming has changed: there is no more AngularJS/Angular1/Angular2 - from now on it's just called Angular
  2. Latest Release: Angular 2.4 (yes, already .4)
  3. Next large release: Angular 4 (yes, not V3 because of a version-number issue) due around March 2017 (today Beta 3 is out)

Note that the seemingly aggressiv version-numbering is because Angular has seriously adopted semantic versioning. 

Angular Features: Stable & Fast

  1. Angular2 seems to be stable and production ready.
  2. The performance of Angular2 seems to be similar to React - which is a critical because that was a big issue in Angular1. There is little to prove this, but it seems that nobody is bothering to prove/disprove it. 
  3. Ahead of Time compilation (which merges all parts of your app into a small, fast, precompiled JS) seems to be mature since about December 2016.
  4. Server-Side Angular Rendering seems to be mature since Dec 2016 as well.

Ecosystem-Status Januar 2017

Most important ecosystem components are still beta or going stable:

  1. RxJS - a core third-party component in Angular, has gone stable with V5
  2. Angular flex layout is still beta 
  3. Angular Material 2 - a very common modern UI library, is still beta - part of the reason is the production workflow (see below)
  4. Kendo UIs Angular 2 components are still beta, but the final version will not need any more jQuery, massively slimming down the components
  5. etc.

Development Workflow: Beta

The Angular team is investing a lot (and I mean a huge lot) into streamlining developer productivity. This includes:

  1. coding-tools like Visual-Studio Code
  2. code-tools like TypeScript
  3. development-automation using Command-Line generators and WebPack
  4. pre-compilers, JIT compilers and server-side compilers
  5. ...and way more

BUT: most of this is still beta, so even though your Angular2 code today will work and run tomorrow, the way you set up your project is still likely to change quite a bit, until these tools/recommendations become official. 

Why Wait?

There are a few things which are maturing progressively, which affect each other. Let's just look at 2-3 things which I picked up:

  1. The initial focus of Angular2 was a bit like .net core: a solid architecture, which will work in many scenarios for many years to come. The architecture is very solid, but this comes with a certain complexity (like .net core). The tools to manage this complexity are still being developed. The most important will be the Angular CLI (Command Line Interface).
  2. Angular2 used SystemJS instead of WebPack for managing dependencies and bundling. They didn't officially recommend it, but used it in all tutorials/demos. This seems to change now - and it looks like WebPack will the the official recommendation going forward. This has a strong impact on the dev-helper tools - so this is certainly causing some delays. 
  3. Most add-ons and dev-tools are still waiting for finalizing certain aspects and decisions - like the AoT or WebPack vs. SystemJS, because once they finish certain parts, they want to support the feature for a long time - so they don't want to include soon-to-be-deprecated features in a stable release. 
  4. The same applies to tutorials, movies, best-practices etc.: it's easy to create a tutorial which demonstrates a feature, but once you create a full tutorial-serios how to really work, this will be obsolete when SystemJS is replaced by WebPack.

So these are IMHO the main reasons why we're still seing delays across the board, from material-design to CLI-tooling to tutorials. 

My Recommendation

I've been working with Angular 1.x for about 2 years now and I'm really keen on using Angular2+. As soon as possible I want to create tutorials, best-practices and data-services for 2sxc-apps and develop Apps using Angular2. 

BUT right now I really recommend to wait a bit more, as the situation is very comparable to .net 4.5 and .net Core: Angular 1.5/1.6 is very mature, has a huge ecosystem and lots of people who know the tools, whereas Angular 2 is cooler and better, but still learning the ropes. I believe that Angular 4 (due in March) will resolve this. So I recommend to wait till then. 

Love from Switzerland, 
Daniel


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler

Comments

Jordan
Hey Daniel,

Great comments. I have an angular2 module for dnn out in the wild and have learned some hard lessons but now really love it. (I have a gulp task, instead of msbuild that creates an installable package for me and I am using the cli with great success, and remote debugging with visual studio works great too. Also, relative paths for the app were a challenge to resolve because the angular app does not exist in the root of the website file structure.) There are still a couple road blocks i'm working on. The latest one I'm working through is using AOT with the angular cli. I have everything working except the import of the $.ServicesFramework. Currently my app does not use AOT but runs well and I would like to use it to further slim down the js files. Have you played with this at all.
Jordan Wednesday, January 18, 2017 10:37 AM (link)
Fuji Nguyen
Thank you for the update. Any thought on how the Angular 2 app can be developed in DNN 9?
Fuji Nguyen Monday, January 23, 2017 12:38 AM (link)
Daniel Mettler
@Jordan - what you've done sounds awesome. I've played with most of the stuff already, but my scope is always very-long-term, so whatever I create needs to have a certain setup which another employee will be able to figure out in 12 months time. Since the "recommended" setup is still very volatile, we're still waiting with production-grade output till approx. March.

@Fuji - Jordan may have an answer for you here, but in general it's very similar to DNN7 and 8, so nothing exotic there. We haven't released any helpers yet like the 2sxc-bootstrappers, because once these are out in the wild, they should be very stable and not change again in a month. So if you're technically versed you can go ahead now, but if you would rather wait for best-practices, you should wait another ca. 2 months. We should have them out then.
Daniel Mettler Tuesday, January 24, 2017 2:52 AM (link)
Jordan
@Daniel, I agree about instability in the framework right now but the style guide and cli seem to at least be narrowing down the options. I personally am sticking with the cli because it has high adoption and likely will be one of the major examples of "best practice" for ng2 apps. That being said, even the cli does not have great support for AOT and it has issues with routes in child modules. It's a very dynamic environment and even simple upgrading of the npm/ng-cli can take me a long time. I have had to learn a lot through fixing issues which is good, I hope it all pays off. I would love to have DNN corp sponsor a talk/webinar about ng2 dev as I think it has such a great ability to decouple our modules from web forms (as do other front end frameworks).

@Fuji, I plan to create a github repo starter module but it's low on my priority, behind paid work :) but I'll post back once i'm complete.
Jordan Tuesday, January 24, 2017 11:20 AM (link)
Luigi Spagnolo
For a project that started in December and will be launched in June this year we decided to base our implementation on Dnn9 and Angular2.
We struggled a bit to integrate Angular2 in our existing development process.
Initially, we opted for SystemJs, but we soon switched to Webpack, with a solution based on the AngularClass starter pack, also integrating gulp for simplifying the build process of the Dnn module.
We inject server-side Dnn configuration (e.g. $.ServicesFramework, module settings, user info) by passing it to the main function that bootstraps the Angular app as .

There are still several critical issues, and they are indeed due to some bugs and interoperability issues of the required developer tools, in particular webpack 2 e TypeScript 2.1 with certain configurations.
Luigi Spagnolo Sunday, January 29, 2017 4:57 PM (link)
Fuji Nguyen
It would be great if there is a Hello World DNN SPA module using Angular 2. How to bootstrap the app inside the DNN framework?
Fuji Nguyen Saturday, February 4, 2017 11:01 PM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out