Tecnologías de la capa de vista. Cómo elegir la opción adecuada

Transcripción

1 Tecnologías de la capa de vista Cómo elegir la opción adecuada

2 #define view

3 VISTA NEGOCIO DATOS

4 Full stack engineer? BAM BPM messaging CDN browser network cache firewall balancer server C E P b u s services O.S. In memory datagrid Virtualiz Hardware batch DB

5 para el usuario, el interfaz es el sistema

6 El usuario browser network?

7 Soluciones sin servidor nobackend.org unhosted.org remotestorage.io hood.ie 5apps.com firebase.com dployd.com parse.com

8 Vista Actualmente la innovación está en la vista Todo en el navegador Ofimática

9

10 Vista Actualmente la innovación está en la vista Todo en el navegador Ofimática IDEs

11

12 Vista Actualmente la innovación está en la vista Todo en el navegador Ofimática IDEs Entretenimiento

13

14

15 opciones de la vista

16 Opciones de capa de vista

17 Apostar por los estándares

18 Historia Comienzo de la revolución AJAX - Antes de Ajax ya se podía hacer con iframes. - Microsoft introduce el objeto XMLHttpRequest en IE5 (OWA) - Google lanza Gmail (2004) y más tarde Google Maps (2005) Aparece Chrome - Competencia en los navegadores - Motores Javascript más rápidos V8 - Gecko - Chakra - Nitro HTML5 - CSS3, Canvas, locastorage, etc...

19 Aspectos de la capa de vista Charts Drag & drop Media Mobility Accesibility Localization Touch support Tools Responsive design Data / Storage Dynamic loading Testing Theming Routing Browser support Linting Layout Ajax Architecure Minification Widgets Events SEO Templating DOM Manipulation Binding Error handling Scaffolding

20 Y además que tenga rendimiento que sea bonito que sea usable

21 herramientas

22 kit básico

23 Ecosistema HTML5 Herramientas Frameworks Micro Frameworks - Librerías Opinionated framework Librerías de componentes Patrones de diseño Protocolo de comunicación (JSON) Diseño responsive Accesibilidad Offline first Mobile first

24 Navegador IDE Profiler Debugger Emulator

25 HTML5 Homogeneizar navegadores - Reset estilos - Polyfills (shims) ACID Test CanIUse.com Quirksmode.org

26 CSS3 CSS Frameworks Pre-processors - sass - less - prefix-free Twitter bootstrap Zurb foundation

27 Ejemplo SaSS nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { color: $linkcolor; padding: 6px 12px; text-decoration: none; } }

28 Javascript Vale aceptamos javascript como lenguaje de programación Patrones : Herramientas Javascript.next = EcmaScript6 Modules Promises Generators Fat arrow Classes Transpilers : Babel, Traceur

29 Javascript ++ Coffescript Typescript Dart Clojurescript ASM.js *

30 Herramientas de calidad JsLint JsHint flowtype.org ESLint Closure linter (Google) ESLint flow

31 Module loaders AMD - requirejs - curljs CommonJS - webpack - browserify - duojs

32 Herramientas de automatización Plugins Dependencies Transpile Concatenate Minify Img pack Launch test Deploy Live reloading

33 Test - pruebas unitarias QUnit Mocha Jasmine Casper Siesta Chai Sinon

34 Test - pruebas integración Selenium Sahi Protractor Intern Test Studio Intern

35 Test - integración continua Continuous Integration Continuous Delivery Continuous Deployment

36 Test - as a service (SaaS) Múltiples navegadores Múltiples dispositivos Múltiples versiones

37 Test - as a service (SaaS)

38 Lenguajes de plantillas Aceleran el desarrollo doctype html html(lang="en") head title= pagetitle script(type='text/javascript'). if (foo) { bar(1 + 5) } body h1 Jade - node template engine #container.col if youareusingjade p You are amazing else p Get on it! p. Jade is a terse and simple templating language.

39 frameworks

40 Frameworks/librerías AngularJS DHTMLX Wijmo Mochikit RactiveJS Ember Syncfusion WinJS SailsJS Coke ReactJS SmartClient Bootstrap Loopback Locomotive ExtJS/Touch Bindows Foundation Flatiron Tower Dojo Sencha Enyo Durandal Cappucino Qooxdoo WebIX Echo Aurelia Sproutcore Mootools Brick JavascriptMVC Hapi Compound JQuery / UI OpenUI5 Chaplin Mean.IO Underscore KnockoutJS Polymer Meteor DerbyJS KnockBack Marionette KendoUI Rendr SANE Spine Thorax Wakanda Geddy

41 Paradoja de elección The Paradox of Choice - Why More Is Less LA ABUNDANCIA PERJUDICA LA LIBRE ELECCIÓN

42 Seleccionar un framework AngularJS 37,992 15,886 JQuery 34,249 8,301 Meteor 24,533 2,766 Backbone 21,574 4,814 React 21,181 2,938 Ember 13,541 2,894 Polymer 9, Knockout 6,322 1,084 Marionette 6,120 1,158 GitHub

43 Librerías vs Frameworks

44 Full stack frameworks Javascript para todo Node.js en el servidor Async

45 Librería de componentes

46 Futuro del estándar HTML Welcome to the future <google-map lat="37.790" long=" "></google-map> - HTML imports - Shadow DOM - <Template> - Pointer events

47 Micro frameworks Rendering Templating Bindings MVC, MV* Flight

48 Jeremy Ashkenas - Octubre líneas Base para construir un framework - Model - Collection - Events - Routes - Views

49 Superheroic Javascript MVW Framework Misko Hevery Google 2009 HTML enhanced for web apps! Estructura, Testing, DRY MVC, Data bindings Dirty Checking Extiende HTML con directivas Inyección de dependencias Java oriented Directives Scopes Services

50 Angular <!doctype html> <html ng-app="todoapp"> <head> <script src=" <script src="todo.js"></script> <link rel="stylesheet" href="todo.css"> </head> <body> <h2>todo</h2> <div ng-controller="todolistcontroller as todolist"> <span>{{todolist.remaining()}} of {{todolist.todos.length}} remaining</span> [ <a href="" ng-click="todolist.archive()">archive</a> ] <ul class="unstyled"> <li ng-repeat="todo in todolist.todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <form ng-submit="todolist.addtodo()"> <input type="text" ng-model="todolist.todotext" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add"> </form> </div> </body> </html> angular.module('todoapp', []).controller('todolistcontroller', function() { var todolist = this; todolist.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; todolist.addtodo = function() { todolist.todos.push({text:todolist.todotext, done: false}); todolist.todotext = ''; }; todolist.remaining = function() { var count = 0; angular.foreach(todolist.todos, function(todo) { count += todo.done? 0 : 1; }); return count; }; todolist.archive = function() { var oldtodos = todolist.todos; todolist.todos = []; angular.foreach(oldtodos, function(todo) { if (!todo.done) todolist.todos.push(todo); }); }; });

51 Angular JS Cons Curva de aprendizaje Rendimiento Angular 2

52 2007 The Dojo Foundation Desktop & mobile Muy modular - core/dijit/dojox Gran colección de controles Temas

53 A framework for creating ambitious web applications Yehuda Katz, Tom Dale 2011 Handlebars Muy componentizado Routes/Models/Controller/Templates/Views Tooling - Ember Data - Ember inspector

54 2012 Blaze: Reactive UI programming Live-query: Mini-mongo Publish-subscribe Distributed Data protocol Isomorphic Javascript Isobuild: Custom lib js packaging cool vendor Application development 2015

55 Mayo 2013 A Javascript library for building user interfaces Disruptivo - Repensar las buenas prácticas - Imperativo -> declarativo Inmutabilidad Virtual DOM Server Rendering

56 React handlesubmit: function(e) { e.preventdefault(); var TodoList = React.createClass({ var nextitems = this.state.items.concat([this.state. text]); var nexttext = ''; render: function() { this.setstate({items: nextitems, text: nexttext}); var createitem = function(itemtext, index) { return <li key={index + itemtext}>{itemtext}</li>; }; }, render: function() { return ( return <ul>{this.props.items.map(createitem)}</ul>; <div> } <h3>todo</h3> }); <TodoList items={this.state.items} /> var TodoApp = React.createClass({ <form onsubmit={this.handlesubmit}> getinitialstate: function() { return {items: [], text: ''}; }, onchange: function(e) { <input onchange={this.onchange} value={this. state.text} /> <button>{'add #' + (this.state.items.length + 1)}</button> </form> this.setstate({text: e.target.value}); </div> }, ); } }); React.render(<TodoApp />, document.body);

57 React Flux : arquitectura para construir con React Native : controles nativos + javascript

58 ExtJS/Touch Inmensa colección de widgets Documentación muy buena Layout system Data system Charts Themes

59

60

61

62 Acerca de Capgemini Con alrededor de empleados en 40 países, Capgemini es uno de los principales líderes en servicios de consultoría, tecnología y outsourcing del mundo. El Grupo Capgemini ha alcanzado unos ingresos globales de millones de euros en Capgemini en colaboración con sus clientes, crea y proporciona las soluciones tecnológicas y de negocio que mejor se ajustan a sus necesidades y que conducen a alcanzar los resultados deseados. Siendo una organización profundamente multicultural, Capgemini ha desarrollado su propia forma de trabajar, la Collaborative Business Experience TM, basada en su modelo de producción Rightshore. Para más información: Rightshore is a trademark belonging to Capgemini Mayo 2012 Capgemini. All rights 2014 reserved. Copyright Capgemini All Rights Reserved