AngularJS - GrapeCity Echo Tokyo

Editor's Notes

1. Good morning, thanks for coming. My name is Bernardo de Castilho. I am a co-founder and CTO of ComponentOne (a division of GrapeCity). We have been developing commercial components for 25 years, and today we will talk about AngularJS, Google’s JavaScript application framework.
2. The internet as we know it was born in 1990, initially as a way to distribute hyperlinked documents. Five years later, Netscape introduced a browser with an interpreter which could change documents dynamically. This had a huge impact, and a few years later the interpreter became a standard called EcmaScript (AKA JavaScript). Five years after that, Microsoft realized that in order to write applications with HTML/JavaScript, they needed to be able to make asynchronous requests to the server. The Microsoft implementation of Ajax quickly became a standard. At this point, developing applications for the Web using JavaScript and HTML was becoming mainstream, but there was a lot of incompatibility between browsers. There were many JavaScript libraries available to address this problem, but in 2005 jQuery appeared and quickly became the standard way to write JavaScript code that would run well on any browser. A few years after that, it became clear that HTML5 developers needed something that desktop developers had since the 1990s: components. jQueryUI was created to fill that gap. jQueryUI aimed to follow the success and popularity of jQuery and provide a framework for creating re-usable components in JavaScript. It was moderately popular, but not nearly as much as jQuery. In 2010, several important things happened almost at once: IE9 was released with support for EcmaScript5 and most of HTML5, re-defining ‘modern browser’. EcmaScript5 brought many real enhancements to the JavaScript language, and so did HTML5. This meant anyone targeting only modern browsers could do away with a lot of workarounds, libraries, and ‘polyfills’. Microsoft released TypeScript, an object-oriented language based on the EcmaScript 6 standard that generates EcmaScript 5 output. TypeScript provides true object-oriented programming, IntelliSense, and static type-checking. It increases programmer productivity and improves code quality, especially when working with large applications. The popularity of jQuery started to diminish. Modern browsers are standards-compliant, and EcmaScript6/HTML5 offers many of the benefits that jQuery had but with more efficiency and no overhead. Now all the main pieces were in place for HMTL/JS to become a viable application development platform, except a standard application framework to unify all these elements. There were many candidates, but no clear winner. Then Google released AngularJS, their “Heroic Application Framework”. AngularJS was an overnight success that has been gaining popularity ever since it was released. It was time for a new generation of Controls to go with all this new stuff.
3. AngularJS is an open-source web application framework maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model-view-viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.
4. Decouple DOM manipulation from application logic. (MVVM pattern). Decouple the client side of an application from the server side. This allows development work to progress in parallel, and allows for reuse of both sides. Provide structure for the entire application development cycle: from designing the UI, through writing the business logic, to testing.
5. There are many other frameworks out there (Durandal, Ember, Backbone, Knockout, etc). Angular is different because: It comes from Google. It is all-encompassing (templates, components, dependency-injection, routing, testing, etc).Less need to mix and match plugins, less conflicts It is extensible (directives). It is non-opinionated (models use standard JavaScript variables). It has a gentle learning curve (easy to do simple stuff, possible to do hard stuff). It has become a de-facto standard (broad support, plenty of resources). Strong support for MVVM (convergence with XAML)
6. The AngularJS library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.
7. AngularJS is all about directives! Rich markup, no need to generate stuff (like XAML) Designers and developers can work in parallel (like XAML ;-) Angular ships with tons of useful directives Anyone can create directives
8. Notice the highlighted parts: ng-app marks the page as an AngularJS application, and kicks-off the Angular engine ng-model creates a two-way binding between the page (content of the input element) and the model (“name” variable) template content {{}} is automatically updated with the result of the expression (safe subset of JavaScript)
9. Validation is important in many applications, and HTML has some validation support built-in. When you create HTML forms, you can use attributes to specify the type of input elements and some requirements. Unfortunately, the HTML validation mechanism is not fully implemented in all browsers and it is not flexible enough to support some simple scenarios where the validity of the data in one field depends on the content of other fields. For example, when creating new accounts it is common to require the user to enter a password twice, to confirm he didn’t make any mistakes and won’t be locked out of the new account by accident. In this common scenario, the validation rule for the “confirm password” field depends on the current value of the “password” field. And there is no way to express that using HTML markup. So let’s develop a simple AngularJS directive that allows you to specify whether a field is valid using expressions that can involve any variables in the controller. The markup shows how this will be used
10. The directive definition returns an object that contains directive parameters (lots of options) and a *link* function. The link function links the HTML on the page to the model in the controller. It receives as parameters the scope (which represents the controller), the element, and the attributes. In this case, the link function uses a scope.$watch to receive notifications whenever the value of the speficied expression changes. When that happens, it uses the setCustomValidity method to set or clear the validation error message. After that, it’s all up to the regular HTML validation mechanism.
11. Using directives to create custom attributes is a very powerful technique. It enables advanced data-binding and validation scenarios for example. But directives can also be used to create custom HTML elements. This is how we can use AngularJS to create custom web components today. The basic idea is simple. The link function of the directive is responsible for creating the control and attaching it to a host element on the page. The control properties, methods, and events are bound to scope variables using one or two-way bindings.
12. The basic idea is simple. The link function creates the control and attaches it to a host element on the page. It uses scope.$watch to monitor changes in the scope and applies those changes to the control. This is binding from the controller to the view. It listens to event controls and updates the scope. This is binding from the view to the controller. Notice: Restrict: ‘E’ means the directive is a custom element tag (not an attribute) Scope: … defines an isolated scope, so the directive attribute names are independent from the controlle This illustrates the basics. There’s a lot more depth to directives…
13. AngularJS is incredibly popular. And anything that popular gets some negative feedback as well. Perf issues: this probably means you are not doing MVVM correctly. You should not be watching arrays with thousands of items, or using hundreds of templates on a page. Use CollectionView and a Grid control instead. Minification: do you really have to minify the ViewModel? Why not just the model? But if you really want to do it, it is possible. Debugging: It’s always hard. But TypeScript can catch a lot of errors, and ng has great support for testing. Directives are hard: Yes, if you want to use their full power you assume a lot of responsibility. But they make simple things easy, and complex thing possible. That’s all I ask… Docs are terrible: That is true. But thankfully there are a million resources on the web. Because it is really popular! Not as easy as jQuery? Personally, I disagree. But that’s beside the point. It makes no sense at all to compare these two libraries. jQuery is not an application framework! Anyway, some/most of these apparently will be addressed in AngularJS 2.0.
14. Latest is 1.4. Some parts of it will be in 2.0 (routing, ng-viewport and ng-link) Google is working on 2.0, but release date has not been announced (end of 2015 seems optimistic…) Leverage TS/ES6 features, especially classes, properties, and class annotations Simpler and more consistent (less ng-specific stuff in the markup) Faster and cleaner (no more jQuery/jqLite, use DOM and native features directly) Easier to write directives (annotated classes: layout, decorators, and components) CONVERGENCE towards MVVM
15. Quick example of expected changes: ng-repeat replaced with *for (this is changing) ng-model replaced with [propertyName] (nice: clearer and more consistent) ng-click replaced with (click) (nice: clearer and more consistent)
16. Angular 2.0 components are annotated classes More integration between JS and Angular; JS does more, ng has to do less. @Component annotation specifies the component name (directive name) @View annotation specifies the component template The class implementation contains the logic (controller)
17. TypeScript: classes, properties. Works today, will work with ng 2.0 ES6/TS1.5: classes, annotations => basis for ng 2.0 directives Angular 1.4: has some 2.0 features (routing)
18. TypeScript: classes, properties. Works today, will work with ng 2.0 ES6/TS1.5: classes, annotations => basis for ng 2.0 directives Angular 1.4: has some 2.0 features (routing)