Angular.js - Developing in a better Browser

Internal presentation about Angular.js I gave @ mediapeers.com. No code examples, some high level concepts, many links.

Transcript

1. ANGULAR.JS DEVELOPING IN A BETTER BROWSER a short introduction REALLY short, I value your time NO CODE EXAMPLES watch the 12 minutes video - AngularJS Tutorial
2. WHO AM I ROMAN HEINRICH mindreframer (github/twitter) Ruby/Puppet/WebDev worked with Angular.js first at 2010 just one small internal Sinatra app felt like magic
3. GETTING SLIDES download the PDF file for clickable URLs or clone directly from Github $ g i t c l o n e h t t p s : / / g i t h u b . c o m / m i n d r e f r a m e r / n g - s l i d e s . g i t $ c d n g - s l i d e s $ s h / s l i d e s
4. A BIT OF HISTORY http://www.appliness.com/misko-hevery/ Angular.js was started in 2009 by Misko Hevery internal project at Google rewrote 6 months of GWT code (3 devs) alone within 3 weeks in Angular.js! 1/17 of the original code size! first public release in Oct 2010
5. HISTORY CONT. Google sponsors the development still completely open-source did take a longer time to become popular API changed a lot before 1.0 version
6. WHAT MAKES ANGULAR.JS UNIQUE? increases the abstraction level of the browser NO new syntax teaches the old browsers new tricks familiar, since it's just HTML with new features
7. IF YOU LOOK AT AN ANGULARJS APPLICATION... there is complete lack of an angular API nothing to inherit nothing to call and no complex life cycle for your controllers to follow application code is clean and succinct free of functions which hide the problems
8. SOME QUOTES Angular is what the web browser would have been, had it been designed for applications Pretty sure that HTML6 is going under the codename @angularjs!
9. ANGULAR PROVIDES declarative HTML easy data-bindings dependency injection reusable components routing very extensive testing for your application unit testing - very fast E2E Testing - full stack testing
10. COMMON MISCONCEPTIONS just another templating framework must be slow or unsuitable for large scale applications because it does dirty checking
11. COMMON MISCONCEPTIONS - TRUTH consumes DOM templates result is a live, continuously updating view which updates only the relevant parts of the page application model the single source of truth at all times with some clever optimization it is not slow at all
12. ECO SYSTEM Grunt Karma (Testrunner) Yeoman (project generator) Bower (package manager for browser libs) Batarang (Chrome Plugin with Angularjs specific information) UI Integration UI-Bootstrap UI-Router UI-Utils - plenty of ready solutions angular-ui.github.io NgModules StackOverflow - 11,555 Questions
13. WHY SHOULD YOU CONSIDER ANGULAR FOR YOUR NEXT PROJECT? the wholistic approach smart founders, who think in long terms the browser fundamentally changes for better testability is enforced! no coupling to DOM business logic is plain JS killer-feature: write your DSL for browser!
14. WHY SHOULD YOU CONSIDER ANGULAR FOR YOUR NEXT PROJECT?, CONT'D plenty of good resources to learn many-many screencasts! vibrant community, user groups easy to get started the future of browsers is shaped by same concepts Polymer Project Web Components Slides about Web Components - MUSTSEE! Custom Elements Shadow DOM HTML Imports Template Bindings
15. REAL USERS Doubleclick For Advertisers Youtube Leanback (And on PS3) Goodfilms Mobile Site Bombermine - massive multiplayer game! Plunker Localytics, rewrite from Backbone, 4K -> 2K with more Markup GoCardless, 9K lines ng-app
16. WHAT'S NEXT? 12 minutes to get you hooked: AngularJS Tutorial MOAR VIDEOS! :) Extensive Tutorial, 2012.10
17. INITIAL HURDLES UI Flickering jQuery and Angular - dependecy shifting Minification Some Angular Pitfalls
18. INITIAL HURDLES, CONT'D Learning Curve is not predictive Understand Modules Before You Start When Your Controllers Get Bigger, Learn Scope When You Manipulate DOM in Controller, Write Directives Angular.js Router Might Not Be What You Expected Things I wish I were told about Angular
19. INITIAL HURDLES - GOCARDLESS Organising your files Modules and dependencies Testing setup with Karma Replacing Rails in Dev- Grunt much better fit Angular.js Router Might Not Be What You Expected How to build a large Angular.js application
20. INITIAL HURDLES - LOCALYTICS Directives are hard Form validation is great but requires some thought Declarative is good Angular at Localytics
21. INITIAL HURDLES - BYTESFORTHOUGHT Forget jQuery’s event handling altogether Waiting for DOMready - how? Avoid the $scope.$apply() madness, use $scope.safeApply() Angular Tips
22. RESOURCES Thinkster.io - better way to learn Angular.js A very long and up-to-date list with links, also in DE/RU My link compilation My code compilation
23. ANGULARJS FUNDAMENTALS IN 60 MINUTES 1. AngularJS Fundamentals in 60 Minutes- Introduction 2. AngularJS Fundamentals in 60 Minutes - Getting Started 3. AngularJS Fundamentals in 60 Minutes - Directives, Filters and DataBinding 4. AngularJS Fundamentals in 60 Minutes - Views, Controllers and Scope 5. AngularJS Fundamentals in 60 Minutes - Modules, Routes and Factories 6. AngularJS Fundamentals in 60 Minutes - Customer Manager App Demo 7. AngularJS Fundamentals in 60 Minutes - Summary
24. THE END QUESTIONS?