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.
Upcoming SlideShare
The Baker Family of Cambridgeshire.
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Creando Aplicaciones Web en el 2015

Download to read offline

[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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Creando Aplicaciones Web en el 2015

  1. 1. Evento México CREANDO APLICACIONES WEB EN EL 2015 Marzo 2015 1
  2. 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. 3. PODs Our Studios
  4. 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. 5. UI getting Enterprise ...because Javascript is not about displaying alert() anymore...
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. UI TRENDS Tendencias, desafíos, expectativas
  17. 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. 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. 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. 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. 21. Keeping Social Consideraciones “being... a connected being” ● Herramientas colaborativas ● Información en la nube
  22. 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

[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

Views

Total views

648

On Slideshare

0

From embeds

0

Number of embeds

12

Actions

Downloads

10

Shares

0

Comments

0

Likes

0

×