Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Yo solo te pedí un plátano

25 views

Published on

Charla Gapand

Published in: Software
  • Be the first to comment

  • Be the first to like this

Yo solo te pedí un plátano

  1. 1. Quique Fdez. Guerra Software Dev. Engineer Plainconcepts @CKGrafico YO SOLO TE PEDÍ UN PLÁTANO...
  2. 2. Info@plainconcepts.com Avinguda Josep Tarradellas, 10, 6º 1ª 08029 Barcelona, España +34 93 3607 114 Barcelona
  3. 3. helpdev.org
  4. 4. Joe Armstrong, Erlang
  5. 5. ¿RECUERDAS?
  6. 6. 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
  7. 7. 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.
  8. 8. ASÍ SE HACÍAN LAS COSAS ANTES
  9. 9. 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
  10. 10. • Dependencias Navegador • Descarga jQuery.com LIBRERÍAS jQuery.com
  11. 11. ASÍ SE HACEN LAS COSAS AHORA
  12. 12. • 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
  13. 13. • 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
  14. 14. • 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
  15. 15. • 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?
  16. 16. Anotaciones Tipos ES6 ES5 TypeScript Used by Typescriptlang.org
  17. 17. TYPESCRIPT https://github.com/antonybudianto/angular2-starter/blob/master/tsconfig.json
  18. 18. 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
  19. 19. 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
  20. 20. KARMA https://github.com/CKGrafico/Angular1.5-Sample-Project/blob/master/karma.conf.js
  21. 21. • 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
  22. 22. WEBPACK https://github.com/adu8419/angular2-webpack/blob/master/config/webpack.dev.js
  23. 23. 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
  24. 24. BEM + CONSEJOS http://blog.ckgrafico.com/tomando-decisiones-estructurar-los-componentes-css/ Module + Block-Element--Modifier Responsive prefixes States Utilities JS-Clases
  25. 25. SASS
  26. 26. 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
  27. 27. MÓDULOS
  28. 28. MÓDULOS bit.ly/js-modules-board
  29. 29. COMPONENTES Importación de módulos Tag Plantilla Estilos Clase Dependencias
  30. 30. 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
  31. 31. INYECTABLES Importación de módulos Servicio Clase Inyección Registro
  32. 32. PIPES Importación de módulos Nombre del filtro Interfaz Pipe Filtro https://plnkr.co/edit/Oo5NetgdZzs1nxDqleRl
  33. 33. 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
  34. 34. ¿ENTONCES?
  35. 35. 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’
  36. 36. Quique Fdez. Guerra Software Dev. Engineer Plainconcepts @CKGrafico YO SOLO TE PEDÍ UN PLÁTANO...

×