A look into Angular 2

AngularJS has been around for a while and its development direction made it a bit stale. This led many people to start looking into other frameworks. Now Angular is back, under the guise of Angular 2 and, it may be the goto framework for years to come.

Transcript

1. A look into Angular 2 André Coelho
2. Value proposition Cross platform • Progressive web apps • Use modern web platform capabilities to deliver app-like experiences. High performance, offline, and zero-step installation. • Native • Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native. • Desktop • Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.
3. Value proposition Speed and Performance • Code generation • Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework. • Universal • Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO. • Code splitting • Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.
4. Value proposition Productivity • Templates • Quickly create UI views with simple and powerful template syntax. • Angular CLI • Command line tools: start building fast, add components and tests, then instantly deploy. • IDEs • Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.
5. Value proposition Full Development Story • Testing • With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner. • Animation • Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API. • Accessibility • Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.
6. Architecture overview • Modules • Components • Templates • Metadata • Data binding • Directives • Services • Dependency injection
7. Modules • Angular applications are modular • Every app has at least one module (root module) • Typically modules will be associated with features or workflows within the application • A module is in effect a cohesive block of code dedicated to an application domain • This is a recent introduction to angular 2 and it’s meant to improve app structure and cut down on boilerplate when writing component metadata • Obs.: angular modules are different from JavaScript modules
8. Components • A component is made up of two parts (optionally three) • The code that defines its application logic • The HTML template that defines how its view is rendered • The CSS that defines the styling for the view • Components are created, updated and destroyed as the user moves through the application • Components have a lifecycle and all of its stages can be tapped by overriding the lifecycle hooks (ngOnInit, ngOnDestroy, ngAfterViewInit, etc.)
9. Components
10. Templates • This is a form of HTML that lets angular know how to render the component’s view • This is where the bindings for your view’s model are set • Where events can be bound • Where other components can be instantiated
11. Templates
12. Metadata • This is what tells angular how to process a class • For a class to be a component you need to attach metadata to it by using decorators • Typically a component will feature declarations for what its selector looks like, the path to its template, the list of directives/components it utilizes and a list of dependency injection providers
13. Metadata
14. Data binding • Without a framework pushing data values into HTML controls, capturing user inputs and turning them into updates becomes a tedious, error-prone, somewhat nightmarish task
15. Data binding • Interpolation • Property binding • Event binding • Two-way binding
16. Directives • A directive is a class with directive metadata • Angular templates are dynamic and directives instruct angular on how to transform the DOM • A component is a directive, with a template • There are also structural and attribute directives • Structural directives alter layout by adding, removing and replacing elements in the DOM • Attribute directives appear within an element’s tag much like attributes and they alter the appearance or behaviour of an element
17. Directives
18. Services • Service is a broad category encompassing any value, function, or feature that your application needs. • Almost anything can be a service. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. • Angular has no definition of a service. There is no service base class, and no place to register a service. • Yet services are fundamental to any Angular application. Components are big consumers of services. • Component classes should be lean. They shouldn’t fetch data from the server, validate user input, or log directly to the console. They should delegate such tasks to services. • Angular does help you follow these principles by making it easy to factor your application logic into services and make those services available to components through dependency injection.
19. Services
20. Dependency injection • Dependency injection is a way to supply a new instance of a class with the fully-formed dependencies it requires. • Most dependencies are services. • Angular uses dependency injection to provide new components with the services they need. • When Angular creates a component, it first asks an injector for the services that the component requires. • An injector maintains a container of service instances that it has previously created. If a requested service instance is not in the container, the injector makes one and adds it to the container before returning the service to Angular. When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments. This is dependency injection.
21. Change detection • Change detection is needed when: • Events are fired • XHR • Timers • Angular change detection is aided by a library called Zone • The ApplicationRef listens to NgZone’s onTurnDone event and fires a tick function to perform CD • Every component has its own change detector • Much like data flows from top to bottom, change detection does so as well • Since Angular generates VM-friendly code CD is very fast (hundreds of thousands of checks within a couple of milliseconds)
22. Angular 1 vs Angular 2 • Faster checking of a single binding • Avoids, whenever possible, scanning parts of the component tree • No more $scope or controllers or jqLite • No more guesswork trying to pick the right abstraction to implement (Service, Factory or Provider) • Better DI, no more global pool of objects, only one DI mechanism
23. Angular 2 vs React • Angular 2 is more HTML-centric • React is JavaScript-centric • Angular 2 is more opinionated • React has more room for inconsistency in development practices • Angular uses string-based HTML templates • React allows you to write templates in JavaScript using JSX
24. Angular 2 vs React • Angular 2 data binding is more powerful • React’s data binding is more manual • Angular 2 fails in runtime • React fails in compile time
25. Questions?
26. Demo/walkthrough • Angular 2 -Tour Of Heroes sample app • http://plnkr.co/edit/?p=preview
27. Resources • http://blog.thoughtram.io/exploring-angular-2/ • https://www.reddit.com/r/Angular2/ • https://angular.io/docs/ts/latest/guide/architecture.html • http://blog.debugme.eu/react-vs-angular2 • https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51#.c3hy1tcik • http://blog.backand.com/angular-2-vs-react/ • http://blog.scalac.io/2016/02/16/react-vs-angular-2.html • https://www.digitalsurgeons.com/thoughts/technology/angular-2-reactjs-and-the-state-of-modern-web-apps/ • http://blog.angular-university.io/angular-2-application-architecture-building-flux-like-apps-using-redux-and-immutable- js-js/ • https://www.youtube.com/watch?v=jvKGQSFQf10