Rules to Getting Started with Angular 2

Angular 2 is a great improvement on Angular 1, however it also comes with a completely new set of rules and guidelines to get you up and running with the least pain. ​

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. Do you know the best IDE for Angular?

    ​When developing Angular, there are lots of choices for code editors. We have 2 ​editors we love Visual Studio Code and Visual Studio 2015.
    angular-machine-setup-1.png
    Figure: Good Example - Visual Studio 2015 is the real deal. It's the full integrated development environment (IDE) used to create enterprise software applications. If you already know and love Visual Studio, you can continue to use it to build Angular applications

    Integrating your Angular project into an ASP.NET project isn't straightforward however and requires jumping through some hoops - check out the Visual Studio 2015 quickstart from the Angular docs as a great starting place. 

    Having your API and your Angular all in the same project will save you a lot of work when your website implements Active Directory authentication. This is the main scenario where we at SSW choose this configuration.

    A downside of putting your web application and the back-end API in the same project is that now you have coupled your API and your user interface.   

    • Consider designing the API to be the core of your suite of applications and independent of any user interfaces. You can share you API across mobile, web and desktop applications.
    • Client technologies change more frequently than back-end technologies. It is a good idea to have a common, well-written API that can service multiple user interfaces - ie. a web UI, a desktop UI, multiple mobile apps.
    • Continuous deployment is pretty easy to setup these days for API's and WebApps
    • This also lets you maintain, deploy, and scale the API and client/web apps independently. Your front-end and back-end teams can deploy independently

    If you decide to put your web app and API into Visual Studio check out Steven Sanderson's template) for a more complete, real-world example. 

    Note that using this template:

    • r equires understanding of advanced concepts like hot module reloading, server side rendering and a good understanding of web pack .   Check out our rule for the best build tool to make your life easier
    • implements server side rendering on top of ASP.NET Core. Your front end now has a dependency on ASP.NET core which means you cannot deploy your Angular application to a CDN or non-ASP.NET core server
    • will require maintenance as the technologies used in it are updated.  
    angular-machine-setup-2.png
    Figure: Good Example - Visual Studio Code is a free, lightweight IDE that runs on Windows, Linux and OS X. Visual Studio Code is the IDE of choice for many Angular developers and has lots of great extension s for Angular that make developing Angular apps in VS Code a fantastic experience. Visual Studio Code doesn't have the full power of Visual Studio 2015 when it comes to writing your backend in C# - that part is still best done in Visual Studio to get better code completion of C# and to utilise tools like ReSharper
    angular-machine-setup-3.png
    Figure: Good Example - Many experienced teams are using Visual Studio 2015 for their C# backend and loving using Visual Studio Code for their Angular projects. Keep separate solutions for the front-end and the back-end solutions
    Summary: Keeping separate solutions for the front-end and the back-end   - allows using the best IDE for the API (Visual Studio) - allows using the best IDE for the Angular project (Visual Studio Code) - makes using the Angular CLI for your Angular project simple - see the Best Build tool - allows independence deployment and scaling of your API and clients.
  2. Do you know the right way to create your Angular project?

    Angular.io​ is a great place to get started learning Angular 2, but do not use the tutorials as the template for your real apps!​​

    The Quick Start  and Tour of Heros Tutorial will teach you lots about Angular 2 but are not examples of real world projects because:

    1. They do not include a method to create a production build output
      See Do you know the best build tool?
    2. They do not consider whether your application will require the redux pattern 
      See Do you know to use ngrx on complex applications?
    3. They do not include a UI framework
      See Do you know the best UI framework for Angular 2?


    There are also several well used templates that incorporate Angular and server-side tooling.

    The leading example is the ASP.NET template for Angular https://github.com/aspnet/JavaScriptServices/tree/dev/templates
    While these starters often include advanced functionality, we prefer to implement pure Angular CLI projects where possible because Angular updates frequently.. and when you are using someone else's template that incorporates Angular you are left with the options of waiting for them to update their template to the latest version of Angular, or working out how to​ do it yourself. This can often leave you with large amounts of work or be being several months behind the latest versions.

    To learn how to build real-world Angular 2 applications check out FireBootCamp.

    create-angular-bad.png
    Figure: Bad Example - Using regular Angular tutorials
    create-angular-good.png
    Figure: Good Example: The Angular CLI will create you a new Angular 2 project with a single command, and that project will be all setup with production build, unit testing and end to end testing all configured. If you have very specific build requirements the CLI does not currently support custom webpack builds, though this is coming. See https://rules.ssw.com.au/the-best-build-tool for more info
  3. Do you know the best learning resources for Angular?

    Here are the best collection of resources for Angular 2.

    AngularVillage-Book-SP.png
    Figure: Download the Little Book of Angular 2  here! 

    Free Resources ​​

    Training Courses​​

    Books​​​

    Free Events​​​



  4. Do you know the best Build Tool?

    Building, bundling and compiling Angular applications can get complicated. You need great build tools.
    gulp.png
    Figure: Bad Example - Gulp requires hundreds of lines of config to build and bundle Angular applications
    webpack.png
    Figure: Good Example - Webpack is an open-source JavaScript module bundler that can be used to build your application (and lots more as well). Teams with advanced build requirements use Webpack. The downside of Webpack is that it requires a large investment in learning Webpack - if it isn't required, the Angular CLI is a better choice
    cli.png
    Figure: Good Example - Use the Angular CLI on all new projects that don't require custom Webpack builds. The Angular CLI generates components, routes, services, and pipes, follows best practices as well as building applications for production. The Angular CLI build includes best practices including Tree Shaking and Ahead of Time (AoT) compilation out of the box! The Angular CLI uses Webpack under the covers and the ability to customize the Webpack build is currently under development



  5. Do you know to use ngrx on complex applications?

    State management is complex and time-consuming.
    On large applications it becomes very difficult to maintain state. The redux pattern helps resolve this issue.
    ​​

    ngrx is the redux pattern implemented for Angular 2. View on GitHub.

    ngrx.png
    Figure: ngrx supercharges the redux pattern with RxJS

    Benefits:

    • Easy state management
    • Better tooling and debugging
    • Simpler applications to build
    • Increased performance
    • Code that is easy to test
    img1.png
    Figure: ngrx supercharges the redux pattern with RxJS
    img2.png
    Figure: The redux pattern is a way to implement a predictable state container

    The three principles of the redux pattern:

    1. The entire state of the application is represented in a single JavaScript object called a store.
    2. The store is acted upon using special functions called reducers. 
    3. State is immutable and reducers are the only part of the application that can change state.

  6. Do you understand that with Angular you read and write to the model... never to the page? (a.k.a. Forget about jQuery)

    ​The most common mistake that developers make when moving from jQuery to Angular is that they continue to think about updating the page.

    understand-jquery.png
    Figure: In jQuery, you design a page and then use jQuery to perform interactions with the page e.g. reading and setting the values of input boxes, updating the content of divs or handling button events
    understand-badcode.png
    Figure: Bad Example - using jQuery on Angular views will lead to worlds of pain

    A fundamental principal of Angular is that you build a Model in JavaScript (or TypeScript) and then on your view you just databind your UI elements to the model. Any changes that are made are made to the model and the view updates automatically.

    In Angular, you do not interact with the page you update the model, and the page is just displaying a view of the model.

    understand-goodcode.png
    Figure: Good Example - In both AngularJs & Angular 2.0 jQuery is not required on the view. The view binds to properties on a JavaScript model

    Further reading: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background