Angular 2 as Easy as CMYK

Kickstart your development with angular2 with this 4 tips

Transcript

1. Angular 2 as EASY as CMYK
2. C atch the angle Y M K y new friend Typescript ou and webpack eep your style Angular 2 as EASY as CMYK
3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora. @davidcp90 Senior Front-end Developer Developing new ways of making work fulfilling for humanity Angular 2 ~ 4 Meses
4. Angular 2 ‣ MVwhatever Framework ‣ Component based framework ‣ Progressive web apps ‣ Meta: performance ‣ Mejores herramientas y flujo para desarrolladores
5. Catch the angle
6. Modulos Angular 2 Angular 2 Libreria basada en modulos Common Core Forms Http Platform-browser Platform-server Platform-webworker Router Upgrade @angular/——
7. Vista general de una app Angular 2 App Module Feature Modules A B C D E F G H I App M A I N
8. Vista general de una app main.ts
9. Vista general de una app app.module.ts
10. Vista general de una app Feature Modules service @component @pipe service @component @pipe service @component @pipe Clases con decoradores y metadata
11. Vista general de una app service-name.service.ts
12. Vista general de una app component-name.component.ts
13. Data binding
14. Inyección de dependencias “inyectar” comportamientos a componentes sin tener que volver a crearlos - single responsibility
15. Conveniente para devs
16. My new friend Typescript
17. My new friend Typescript Javascript + Código mantenible y escalable compila .ts a .js Incluye lo mejor de Ecmascript2015 y 2016
18. Javascript + • Declaración de tipos • Clases y herencia • Interfaces • Decoradores • Módulos • Lambdas • Nuevos tipos (ej. Observable)
19. Mantenible • Detección de errores y malas prácticas • Excelente integración con IDE’s • Dogma para construir • npm install tslint typescript --save-dev
20. You and Webpack
21. You and webpack Organiza tu código Resuelve dependencias Administra tus módulos Procesa todos tus assets (img,sass,less,html) Automatiza tu flujo de desarrollo
22. Quickstart https:/ /github.com/angular/angular-cli https:/ /angularclass.github.io/angular2-webpack-starter/
23. Keep your style
24. Keep your style https://angular.io/styleguide Patrones Convenciones para nombres y estructura Recomendaciones para escribir mejor tu app
25. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora. ¡Gracias!