Open Talk on AngularJS & Front-End Technologies 2014

1. & Front-End technologies

2. Puntos Claves
¿Qué es AngularJS?
¿Por qué usarlo?
El cambiante mundo del front-end
¿Qué podemos construir con AngularJS?

3. AngularJS es un Framework JavaScript de código abierto,
mantenido por Google, que ayuda con la gestión de lo que se
conoce como single-page applications.

4. JavaScript MV* frameworks
¿Que problemas resuelven?

5. MV* Frameworks
Al momento de hacer una single-page app:
Routing
Templating
Dependencies Management
Module Loaders
Testability
Remote API Integration
Data-Binding

6. ¿Por qué razones debería usar AngularJS?
Powerful
Simple
Testable
Extensible
Popular
Here’s Why You Should Learn AngularJS

7. Es poderoso
DigestLoop, Two-way Data-Binding, Dependency Injection, Seguridad
(nos protege contra XSS cross-site scripting attacks) y más...

8. Es simple
Bootstrap friendly, Form Validations, Filters, i18n, ngRoutes,
ngAnimate, ngTouch y más...

9. Es Testeable
Unit Testing, End-2-End testing, Mocks y más...
Unit and End to End Testing in AngularJS

10. Extensible: Módulos Contribuidos
ui-router, ng-table, ng-sortable, restangular y más...
ngmodules.org/popular

11. Es popular
Satck Over ow Survey 2015

12. Pasado, Presente y Futuro
AngularJS 1.2.x
⇒AngularJS 1.3 (stable) | Angular 1.4 (latest)
Angular 2.0

13. Angular 2.0
Release 2016?
Angular 2.0 Core by Igor Minar & Tobias Bosch at ng-europe
2014

14. Front-End Technologies
AngularJS nos invita a seguir best practices

15. Bower
Esunadministradordepaquetesparalaweb,especí camente
paralapartedelfront-end.Nosayudaamanejarmasfácilmente
lasdependenciasdenuestrosproyectos.
Bower.io

16. Grunt
GruntesunFrameworkquenosayudaaautomatizartareas
comunes,talescomomini carjavascript,preprocesar
templates,unirarchivos,corrercomandosdeSOymuchomas...
Grunt.js docs

17. Yeoman
Yeomanesunaherramientaquenospermiteiniciarnuevos
proyectosrápidamente,creandoautomáticamenteestructuras
einstalandoherramientasparaayudarnosasermas
productivos.
Yeoman.io

18. Yeoman Workflow
Getting started with Yeoman

19. Front-End Technologies
AngularJS nos ayuda a garantizar una mayor calidad
BDD, Test Automation, Continuous Integration, Performance,
Coverage, Docs

20. Jasmine
EsunFrameworkdeTestingparaJavascript,queutilizatécnicas
debehavior-drivendevelopment.
Jasmine.io

21. Karma
EsunTestRunner,quenospermiteutilizardistintosframeworks
detesting,ejecutarnuestrostestsendiversosnavegadores,
generarreportes(performance,coverage,debugging)yasociar
tareascomobuilds,CI,docs,entreotras.
karma-runner.github.io

22. Docular
Esunaherramientaquenosayudaagenerardocumentación
sobrenuestraapplicaciónangulardemaneraautomática.
grunt-docular.com

23. Tools for Scaffolding, Building, and Testing

24. AngularJS Demos
Webs, Chrome & Android apps

25. Web App
AngularJS generator
>
$ yo angular
$ # do some work with AngularJS
$ yo angular:route ayuda
$ yo angular:directive wordfinder
$ # publish
$ grunt build
>
AngularJS Generator Example

26. Demo Web App
Web Demo

27. Demo Chrome App
>
$ yo chromeapp
$ # do some work with AngularJS
$ grunt debug
$ # test chrome app locally
$ grunt build
$ # publish to Chrome Web Store
>
Chrome App generator

28. Ionic Framework
Es un framework que nos permite portar aplicaciones HTML5 a
dispositivos móviles (Android, iOS)
ionicframework.com

29. Demo Android App
>
$ ionic start sopa-de-letras blank
$ # do some work with AngularJS
$ ionic platform add ios
$ ionic platform add android
$ ionic build android
$ # publish app on google play
>
Ionic Guide

30. Datos de contacto
cortez.cristian@gmail.com
@cortezcristian