Evento México

CREANDO APLICACIONES WEB EN EL 2015

Marzo 2015

1

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.

PODs

Our Studios

Our Practices

Software ArchaeologySoftware Maintenance

Content Management SystemsDigital MarketingVideo Content Production

Cloud ComputingManaged ServicesInformation Security

E-commerceContent Management Travel

Design ThinkingUser Experience Design

Visual DesignService Design

Creative Workshops

Collaboration SolutionsProcess Engineering Tools

Digital PlatformsGame DevelopmentGraphic Engineering

Test AutomationMobile TestingGame QA

Data ArchitectureData ScienceData Visualization

HybridNative

ConsultingInnovation as a ServiceProduct Landing

Hardware Design and IntegrationNative Wearable and Embedded DevelopmentWearable Application Usability and Interface DesignData Design & Management

UI getting Enterprise

...because Javascript is not about displaying alert() anymore...

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

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

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

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

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

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

$ 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) taskTesting test/tiny-pubsub.html....OK>> 4 assertions passed (23ms) Running "clean:files" (clean) taskCleaning "dist"...OK Running "concat:dist" (concat) taskFile "dist/ba-tiny-pubsub.js" created. Running "uglify:dist" (uglify) taskFile "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

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

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

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

UI TRENDS

Tendencias, desafíos, expectativas

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

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

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

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

Keeping Social

Consideraciones

“being... a connected being”

● Herramientas colaborativas

● Información en la nube

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