AngularJS Frontenders VLC

Introducción a Angular JS para Frontenders Valencia con @jacarma.

Transcript

1. View Slide

2. Quiénes somos?
   Javier Carrasco @jacarma
   Javier Casal @jcasalruiz
   

   View Slide

3. Qué hacemos? Solvency II
   Nueva ley reguladora de fondos financieros:
   Protección del consumidor
   Control y supervisión de las aseguradoras
   Fondo A
   Fondo B
   Fondo C Fondo D
   50%
   50%
   100%
   

   View Slide

4. Qué utilizamos?
   Frontend?
   

   View Slide

5. Qué queremos?
   API REST y Framework Javascript
   Maduro
   Testable
   Tests, Mocks, etc
   Inyección de dependencias
   Modularidad
   Sin boilerplate
   

   View Slide

6. Elegir framework
   Backbone Closure
   Ember YUI
   Knockout AngularJS
   ¿Y vosotros?
   

   View Slide

7. Elegir framework
   Backbone Closure
   Sin bindings, verboso Poca documentación
   Ember YUI
   Poco maduro No es MVC
   Knockout AngularJS
   Sólo bindings
   

   View Slide

8. Lo que dicen
   "No es una librería"
   "No es un framework"
   "Angular es a los documentos dinámicos lo que HTML a los
   documentos estáticos"
   "Angular es lo que hubiera sido HTML si hubiera sido
   diseñado para hacer aplicaciones web"
   

   View Slide

9. Lo que pensamos
   "Is the Javascript framework that sucks less"
   

   View Slide

10. Creador
    Mysko Hevery
    Agile Coach en Google
    Autor de:
    Testability Explorer
    JsTestDriver
    

    View Slide

11. Madurez
    Angular Backbone Knockout
    Github 9,134 stars 1,760 forks 13,871 stars 2,632 forks 3,632 stars 549 forks
    StackOverflow 4,908 preguntas 8,506 preguntas 5,335 preguntas
    Antigüedad Octubre 2010 Octubre 2010 Julio 2010
    

    View Slide

12. Principios
    No manipular el DOM directamente
    Todo bien separado
    Pensado para ser testeado
    Escribir menos código
    

    View Slide

13. Qué ofrece?
    ● Separación "Model View Whatever"
    ● Data binding
    ● Deep linking
    ● Inyección de dependencias
    ● Plain javascript
    ● Preparado para REST
    ● Componentes reusables
    

    View Slide

14. Demo
    

    View Slide

15. Ecosistema
    Grunt
    Karma (testacular)
    Yeoman
    Angular UI
    Batarang http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html
    Screencasts http://www.egghead.io/
    

    View Slide

16. Demo
    Intro con transparencias 15 min
    Data binding 5m
    Controllers 5m
    Aplicación con deep linking 5m
    Servicios: REST con deployd
    Directivas
    Karma
    Yeoman
    

    View Slide

17. View Slide