Subido porQuique Fdez Guerra
Yo solo te pedí un plátano
Este documento resume la evolución del desarrollo web desde 1995 hasta la actualidad. Comienza con JavaScript y CSS utilizados principalmente para mejorar la apariencia de las páginas web. Luego describe el surgimiento de librerías como jQuery, Angular y React, así como tecnologías como Node.js. Finalmente, discute las tendencias actuales hacia el desarrollo basado en componentes y la reutilización de los mismos.
Yo solo te pedí un plátano
- 1. Quique Fdez. Guerra SoftwareDev. 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.
- 4.
- 7.
- 8. SPA Después de variosañ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 Lacomunidad 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 LASCOSAS ANTES
- 11. Pre desarrollo • Lenguajesa 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.
- 13. ASÍ SE HACEN LASCOSAS AHORA
- 14. • Lenguajes autilizar 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 autilizar 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.
- 19.
- 20.
- 21.
- 22.
- 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.
- 25. POLYFILLS Librerías de JavaScriptque 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.
- 28. ANGULAR 2 https://github.com/antonybudianto/angular2-starter - Frameworkdesarrollo 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.
- 30.
- 31.
- 32. DIRECTIVAS Importación de módulos Atributo Inputs y outputs Bindingsde propiedades Listeners A diferencia de los componentes (que crean su propia vista) estas añaden o modifican un comportamiento en el DOM
- 33.
- 34. PIPES Importación de módulos Nombre del filtro InterfazPipe Filtro https://plnkr.co/edit/Oo5NetgdZzs1nxDqleRl
- 35. ESTRUCTURA DE ARCHIVOS https://angular.io/docs/ts/latest/guide/style-guide.html Carpetaprincipal Contenedor de la app +Componentes propios +Componentes reutilizables scss, fonts, etc. dist, tasks
- 36.
- 37. PLANTEAR ☐ ¿Duración delproyecto? ☐ ¿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 SoftwareDev. Engineer Plainconcepts @CKGrafico YO SOLO TE PEDÍ UN PLÁTANO...