[TOP 3 TECH UPDATES MEXICO] Creando Aplicaciones Web en el 2015: Nuevas tendencias, desafíos, y mejores prácticas Empujado por la revolución mobile, el emergente mundo de Internet Of Things, la web a evolucionado hacia una gran y ubícua plataforma de desarrollo de aplicaciones. Sin embargo, esta evolución posee dos caras: la de posicionar a la web como una plataforma tecnológica capaz de desbancar tecnologías como Flash y Silverlight, y de competir con iOS, o Android; y la de una plataforma inmadura, difícil de aprender, y de utilizar para crear experiencias de usuario de calidad. En esta charla se dará una introducción a las nuevas tendencias en el desarrollo web, sus dificultades y desafíos, y las lecciones aprendidas obtenidas trabajando con estas tecnologías de punta. Speaker: Fernando Curra

1. Evento México
CREANDO APLICACIONES WEB EN EL 2015
Marzo 2015
1

2. Our Studios
At Consumer Experience we believe
that in order to retain and engage the
most demanding online users, our
clients need scalable and appealing
websites, providing predictable, highly
available systems and up-to-date
content.

3. PODs
Our Studios

4. Our Practices
Software Archaeology
Software Maintenance
Content Management Systems
Digital Marketing
Video Content Production
Cloud Computing
Managed Services
Information Security
E-commerce
Content Management
Travel
Design Thinking
User Experience Design
Visual Design
Service Design
Creative Workshops
Collaboration Solutions
Process Engineering Tools
Digital Platforms
Game Development
Graphic Engineering
Test Automation
Mobile Testing
Game QA
Data Architecture
Data Science
Data Visualization
Hybrid
Native
Consulting
Innovation as a Service
Product Landing
Hardware Design and Integration
Native Wearable and Embedded Development
Wearable Application Usability and Interface Design
Data Design & Management

5. UI getting Enterprise
...because Javascript is not about displaying alert() anymore...

6. Delivery - Integración Continua
Aspectos relevantes
Ocupar un repositorio de código fuente
Integraciones frecuentes y automáticas de un proyecto de software
Automatizar un build
El build debe ejecutar pruebas para asegurar integridad
Cada commit debe disparar un build
Automatizar deployment
Git, Svn, Mercurial, Bazaar
Grunt, Jenkins
Grunt
Grunt, Jenkins
Grunt
Gestión automática de dependencias Bower, NPM

7. Arquitectura
Consideraciones
“It’s all about balance”
Entendimiento de la arquitectura, de los roles y responsabilidades de cada actor
Definición clara de servicios y comunicación desde UI
Elección de patrones de diseño acordes a la arquitectura, encontrando un balance en
varios frentes (código fuente, seguridad e integridad de datos, infraestructura, entre otros)
Nunca perder foco en la usabilidad
Beneficio de esta propuesta: escalabilidad

8. Performance
“There’s no magic bullet”
Consideraciones
Mantener las librerías referenciadas actualizadas
Realizar análisis de código para obtener métricas de rendimiento (Sonar, New Relic)
Aplicar criterios y buenas prácticas de la comunidad. Mantenerse actualizado
Entender el “big picture”: arquitectura propuesta, alcance del producto, navegadores

9. Calidad de código
Analizador estático de código Analizador colaborativo de código
CrucibleJS Hint (JS Lint)
Google Closure Tools Phabricator
Review Board
Gerrit
El objetivo es la identificación de fallas mejoran la calidad de código y las
skills del desarrollador
Sonar

10. RequireJS
Dependency Injection / Service Locator
“Loading, loading, loading”
● Como Module Loader, optimizado para uso web pero también
apto para otros ambientes Javascript
● Resuelve la carga de otros módulos por dependencia (en el
orden apropiado) e incluso el tiempo (before/after page load)
● Promueve modularización

11. Bower
Gestión de paquetes
“a package manager for the web”
● Gestión de paquetes/libs desde repositorios externos
● Promueve uso up-to-date de dependencias
● Creado por Twitter

12. $ grunt
Running "jshint:gruntfile" (jshint) task
>> 1 file lint free.
Running "jshint:src" (jshint) task
>> 1 file lint free.
Running "jshint:test" (jshint) task
>> 1 file lint free.
Running "qunit:files" (qunit) task
Testing test/tiny-pubsub.html....OK
>> 4 assertions passed (23ms)
Running "clean:files" (clean) task
Cleaning "dist"...OK
Running "concat:dist" (concat) task
File "dist/ba-tiny-pubsub.js" created.
Running "uglify:dist" (uglify) task
File "dist/ba-tiny-pubsub.min.js" created.
Uncompressed size: 389 bytes.
Compressed size: 119 bytes gzipped (185 bytes minified).
Done, without errors.
Grunt
Task Runners
“let the automation era begin!”
● Habilidad para definir actividades repetitivas: minificación,
automatización de tests, build, empaquetado
● Multitud de plugins con otros frameworks: handlebars, JSHint,
less, sass, la lista crece día a día
● Esta herramienta es la más popular, pero se debe considerar
otras como Cake, Gulp o Broccoli según la necesidad

13. Simple Javascript example
console.log('Loading a web page');
var page = require('webpage').create();
var url = 'http://www.phantomjs.org/';
page.open(url, function (status) {
//Page is loaded!
phantom.exit();
});
PhantomJS
Automation
“is not a test framework, it’s used to launch tests via a suitable test runner”
● Automatizar web stack basado en browser headless
● Permite captura de pantalla del resultado
● Permite manipulación del DOM
● Apoyo en monitoreo de performance
● Usado en workflow de pruebas en Bootstrap, jQuery Mobile, Less.js,
Modernizr y YUI3 entre otros
● Usado por Twitter y LinkedIn

14. QUnit
Unit Testing
“a Javascript Unit Testing framework”
● Facilidad de uso
● Variedad de métodos Asserts y el enfoque ha sido en
parte inspiración a lo usado en CommonJS
● Por supuesto, puedes crear tus propios Asserts
● Usado por jQuery, jQuery Mobile y jQuery UI entre
otros
● Creado originalmente como parte de jQuery

15. Yeoman
Web Generators
“scaffolding web apps”
● Generar un template de aplicación en base a
combinación de librerías
● Soporta testing, minification, documentación
● Crea y comparte prototipos o arquetipos

16. UI TRENDS
Tendencias, desafíos, expectativas

17. NodeJS
Platforms
“one language”
● Proyección a desarrollos basados en sólo una tecnología: Javascript,
tanto para backend como para frontend
● Isomorphic Javascript
Aspectos relevantes

18. Responsive Web Design (RWD)
Consideraciones
“continuous adaptation”
● Se ha visto un constante aumento del rango de dispositivos móviles,
ya sea en capacidad, tamaño del display, versatilidad. Lo que implica
nuevas opciones entre resoluciones
● Surgen nuevas líneas de dispositivos wearables como Apple Watch,
Google Glass, Oculus Rift, entre otros
● Nuevos conceptos: Semantic UI

19. Polymer
Componentes reusables
“thinking in building blocks”
● Crear componentes atómicos de fácil reutilización
● Permite desarrollo veloz
● Tiene una herramienta visual para la generación de prototipos
● Permite la creación de aplicaciones mobile-ready
● Apoyado por Google

20. var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
React.render(<Timer />, mountNode);
ReactJS
Componentes reusables
“keep thinking in building blocks”
● Ayuda en la rápida creación de User Interfaces
● Crea componentes “limpios” y de facil reutilización
● Puede ser ejecutado server side apoyado en NodeJS
● A pesar de sus múltiples beneficios aún no convence a la comunidad
● Creado por Facebook

21. Keeping Social
Consideraciones
“being... a connected being”
● Herramientas colaborativas
● Información en la nube

22. BabelJS
JS Transpiler
“the next generation Javascript”
● También conocido como 6to5 (ECMAScript)
● Como transpiler permite traducir código de la especificación 6 a la
actual versión de JS
● El código producido continúa siendo “readable”
● Se pueden customizar las transformaciones o incluso desactivarlas