Charla Gapand

1. Quique Fdez. Guerra
Software Dev. Engineer
Plainconcepts
@CKGrafico
YO SOLO TE PEDÍ UN
PLÁTANO...

2. Info@plainconcepts.com
Avinguda Josep Tarradellas, 10, 6º 1ª
08029 Barcelona, España
+34 93 3607 114
Barcelona

3. helpdev.org

4. Joe Armstrong, Erlang

7. ¿RECUERDAS?

8. SPA
Después de varios años el desarrollo a
evolucionado bastante.
Empieza el declive de flash y nacen
tecnologías como Backbone o Ember.
Nacen Angular y Bootstrap.
Nacen NodeJS y NPM.
Testing en Frontend.
Ajax y jQuery
Primer gran cambio en el
paradigma, se empiezan a utilizar
para descargar datos, animaciones
sencillas o crear componentes con
algo de complejidad.
HISTORIA
JavaScript y CSS
Se utilizan para mejorar el aspecto
de las webs, todavía muy sencillos.
1995-1996
2005-2006
2009-2011
ES1 ES2 ES3 ES5 ES5.1

9. Polymer, React, Angular
La comunidad sigue evolucionando a
grandes pasos, Angular madura y nacen
tecnologías como Polymer o React.
Nace también Bower.
Testing empieza a coger importancia.
2012-2013
2014-2016
La nueva tecnología
Sigue evolucionando y durante esta
época nacen algunas tecnologías,
otras maduran y otras nacen y
mueren.
- Gulp y / Grunt
- / Less y SASS
- X CoffeScript y TypeScript
- X Bower
- X Flash
- Se asienta Angular 1.5
- Nace Angular 2 (beta)
- Testing y linting se vuelven básicos
JSON
(estándar)
ES6
¿?
Los componentes
Viendo la evolución en todas estas
tecnologías, podemos ver que el
presente y el futuro en la web son
los componentes y la reutilización
de estos.

10. ASÍ SE HACÍAN
LAS COSAS ANTES

11. Pre desarrollo
• Lenguajes a utilizar
HTML, CSS, JavaScript (ES3).
• Compatibilidad
Firefox, IE (if IE…).
• Librerías
Ninguna, jQuery/Mootols, etc.
• IDEs y Editores
VS, Frontpage, Dreamweaver, notepad,
etc.
• Metodología
‘Con cuidado’.
Orientación a eventos.
Orientación a prototipos.
Una aplicación – Muchas páginas.
• Problemas
Huella del desarrollador.
Crear las bases del proyecto.
Estructuración de hojas de estilos.
Carga de archivos.
Escalabilidad
Etc.
• Positivo
Sencillez para obtener un primer resultado.
Curva de aprendizaje de las librerías.
• Testing
(¿Aunque si lo haces durante mejor no?)
Sencillo o inexistente.
Unitarios.
Algo de UI.
• Mantenibilidad
Depende.
Desarrollo Post desarrollo

12. • Dependencias
Navegador
• Descarga
jQuery.com
LIBRERÍAS jQuery.com

13. ASÍ SE HACEN
LAS COSAS AHORA

14. • Lenguajes a utilizar
HTML, HAML, JADE
CSS, SASS, LESS, STYLUS + BEM, OOCSS
JavaScript (ES5, 6), Coffe, TypeScript
• Compatibilidad
Firefox, IE, Edge, Chrome, …
Responsive!!
Electron, Cordova, etc.
• Librerías
Angular, React, jQuery, Moment, Lodash,
RX, etc………
• IDEs y Editores
Visual Studio, Code, Atom, Sublime,
WebStorm, etc.
• Tareas
Gulp, grunt, webpack, jspmio (bundles)
• Dependencias
NPM, Bower?
Pre desarrollo
• Metodología
Orientado a componentes.
• Problemas
Los mismos (seguimos siendo
humanos) aunque se han reducido.
Curvas de aprendizaje.
Expertos en librerías.
• Positivo
Una app compleja debería ser más
sencilla de crear y mantener.
• Testing
Unitarios, mucho más
(Jasmine, Karma, etc.)
Algo de UI (Los seguimos
odiando)
• Mantenibilidad
Depende y siempre va a
depender.
Desarrollo Post desarrollo

15. • Lenguajes a utilizar
HTML, HAML, JADE
CSS, SASS, LESS, STYLUS + BEM, OOCSS
JavaScript (ES5, 6), Coffe, TypeScript
• Compatibilidad
Firefox, IE, Edge, Chrome, …
Responsive!!
Electron, Cordova, etc.
• Librerías
Angular, React, jQuery, Moment, Lodash,
RX, etc………
• IDEs y Editores
Visual Studio, Code, Atom, Sublime,
WebStorm, etc.
• Tareas
Gulp, grunt, webpack, jspmio (bundles)
• Dependencias
NPM, Bower?
Pre desarrollo
• Metodología
Orientado a componentes.
• Problemas
Los mismos (seguimos siendo
humanos) aunque se han reducido.
Curvas de aprendizaje.
Expertos en librerías.
• Positivo
Una app compleja debería ser más
sencilla de crear y mantener.
• Testing
Unitarios, mucho más
(Jasmine, Karma, etc.)
Algo de UI (Los seguimos
odiando)
• Mantenibilidad
Depende y siempre va a
depender.
Desarrollo Post desarrollo

16. • Dependencias
NodeJS (NPM)
• Descarga
Angular 2
jQuery
Lodash
• TypeScript
Typings
LIBRERÍAS
> npm init
> npm install --save angular2
> npm install --save jquery
> npm install --save lodash
> typings init
> typings install --save jquery
> typings install --save lodash

17. • Dependencias
NodeJS (NPM)
• Descarga
Gulpjs
gulp-eslint
gulp-sass-lint
gulp-typescript
gulp-inject
gulp-webserver
jasmine-core
karma & karma-jasmine &
karma-phantomjs-launcher &
karma-coverage
gulp-angular-protractor
run-sequence
TAREAS
> npm install gulp -g
> npm install --save-dev gulp-eslint
> npm install --save-dev gulp-sass-lint
> npm install --save-dev gulp-typescript
> npm install --save-dev gulp-inject
> npm install --save-dev gulp-webserver
> npm install --save-dev Jasmine-core
> npm install --save-dev karma
> npm install --save-dev karma-jasmine
> npm install --save-dev karma-phantomjs-launcher
> npm install --save-dev karma-coverage
> npm install --save-dev gulp-angular-protractor
> npm install --save-dev run-sequence
Nota: ¿Quizá podrías hacerlo todo solo con npm?

18. Anotaciones
Tipos
ES6
ES5
TypeScript
Used by
Typescriptlang.org

19. TYPESCRIPT
https://github.com/antonybudianto/angular2-starter/blob/master/tsconfig.json

20. LINTING
https://github.com/CKGrafico/Angular1.5-Sample-Project/blob/master/scsslint.yml
https://github.com/CKGrafico/Angular1.5-Sample-Project/blob/master/eslint.json

21. GULPFILE
https://github.com/mgechev/angular2-seed/blob/master/gulpfile.ts
https://github.com/CKGrafico/Cordova-Multiplatform-Template/blob/master/App/gulpfile.js
https://github.com/CKGrafico/Angular1.5-Sample-Project/blob/master/gulpfile.js

22. KARMA
https://github.com/CKGrafico/Angular1.5-Sample-Project/blob/master/karma.conf.js

23. • Dependencias
NodeJS (NPM)
• Descarga
Webpack
ts-loader
sass-loader
postcss-loader
autoprefixer
ng2-inline-require
BUNDLE
> npm install webpack -g
> npm install --save-dev ts-loader
> npm install --save-dev sass-loader
> npm install --save-dev postcss-loader
> npm install --save-dev autoprefixer
> npm install --save-dev ng2-inline-require

24. WEBPACK
https://github.com/adu8419/angular2-webpack/blob/master/config/webpack.dev.js

25. POLYFILLS
Librerías de JavaScript que nos permiten utilizar
funcionalidades que aún no soporta el
navegador por si mismo.
- html5shiv Añade las características básicas de HTML5
- WebComponents.js Permite utilizar componentes
- prefix-free Dejar de depender de los prefijos
- flexie Para utilizar flexbox
- svg4everybody Permite utilizar todas las catacterísticas de svg
- Muchos más.
RENDIMIENTO

26. BEM + CONSEJOS
http://blog.ckgrafico.com/tomando-decisiones-estructurar-los-componentes-css/
Module + Block-Element--Modifier Responsive prefixes States
Utilities
JS-Clases

27. SASS

28. ANGULAR 2
https://github.com/antonybudianto/angular2-starter
- Framework desarrollo aplicaciones SPA
- Compuesto por módulos
- Basado en componentes
- Creado con TypeScript
- Inyección de dependencias
- One y Two way binding
- Routing, Plantillas, etc.
- Documentación muy completa

29. MÓDULOS

30. MÓDULOS
bit.ly/js-modules-board

31. COMPONENTES
Importación
de módulos
Tag
Plantilla
Estilos
Clase
Dependencias

32. DIRECTIVAS
Importación
de módulos
Atributo
Inputs y
outputs
Bindings de
propiedades
Listeners
A diferencia de los componentes (que crean su propia vista) estas añaden o modifican un comportamiento en el DOM

33. INYECTABLES
Importación
de módulos
Servicio
Clase
Inyección
Registro

34. PIPES
Importación
de módulos
Nombre del
filtro
Interfaz Pipe
Filtro
https://plnkr.co/edit/Oo5NetgdZzs1nxDqleRl

35. ESTRUCTURA DE ARCHIVOS
https://angular.io/docs/ts/latest/guide/style-guide.html
Carpeta principal
Contenedor de la app
+Componentes propios
+Componentes reutilizables
scss, fonts, etc.
dist, tasks

36. ¿ENTONCES?

37. PLANTEAR
☐ ¿Duración del proyecto?
☐ ¿Tamaño del equipo?
☐ ¿Complejidad del proyecto?
☐ ¿Reutilización de componentes?
☐ ¿Peticiones desde cliente?
☐ ¿Conocimientos del equipo?
☐ ¿Nivel de calidad esperado?
Lo siento, la respuesta casi siempre
es ‘depende’

38. Quique Fdez. Guerra
Software Dev. Engineer
Plainconcepts
@CKGrafico
YO SOLO TE PEDÍ UN
PLÁTANO...