creando aplicaciones web en el 2015
Post on 16-Jul-2015
168 Views
Preview:
TRANSCRIPT
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.
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
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
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
top related