Laboratorio de Innovación

Plantilla estándar de frameworks y bibliotecas JavaScript para proyectos web

04/12/2013

Antonio, Jorge & Toño

Contenidos

Clasificación de proyectos JavaScript
Evaluación de ~20 proyectos
Selección de un subconjunto de herramientas
Elaboración de una plantilla
Elaboración de un ejemplo simple de uso

① Clasificación de proyectos JavaScript

⊚ Componentes visuales y gráficas

Bibliotecas de widgets, controles de UI y gráficas

⊚ Componentes visuales y gráficas

Bibliotecas de widgets, controles de UI y gráficas

Bootstrap, jQuery UI, jQuery Mobile, Kendo UI, Sencha, Dojo, script.aculo.us, AngularUI

⊝ Manipulación del DOM, AJAX y utilidades varias

Bibliotecas de funciones misceláneas que amplían o corrigen la API JavaScript del navegador y proporcionan abstracciones útiles o notación más concisa para necesidades comunes en la web

⊝ Manipulación del DOM, AJAX y utilidades varias

Bibliotecas de funciones misceláneas que amplían o corrigen la API JavaScript del navegador y proporcionan abstracciones útiles o notación más concisa para necesidades comunes en la web

jQuery, Underscore, YUI, Prototype, RequireJS, Zepto

⊛ Arquitectura de la aplicación

Frameworks completos que sirven de esqueleto de aplicaciones web y dotan de estructura a las páginas y a sus distintas partes, generalmente siguiendo un patrón de diseño tipo MV*

⊛ Arquitectura de la aplicación

Frameworks completos que sirven de esqueleto de aplicaciones web y dotan de estructura a las páginas y a sus distintas partes, generalmente siguiendo un patrón de diseño tipo MV*

AngularJS, Backbone.js, Knockout, Ember

La prioridad está en el framework

⊚ ⊛ ⊝

② Evaluación de ~20 proyectos

Precio
Peso del archivo JS
Licencia
¿Funciona en móviles y tabletas?
¿Graceful degradation?
Calidad de la documentación

② Evaluación de ~20 proyectos

Popularidad
Sociabilidad (plugins para EDIs, conectores con otras herramientas, etc.)
Curva de aprendizaje
Puntos fuertes y débiles
Funcionalidades (si se trata de UI, nº y calidad de los controles disponibles)

Wiki → Propuesta labo HTML: trabajo

③ Selección de un subconjunto de herramientas

④ Elaboración de una plantilla

angular-seed

app/                --> all of the files to be used in production
  css/              --> css files
    app.css         --> default stylesheet
  img/              --> image files
  index.html        --> app layout file (the main html template file of the app)
  index-async.html  --> just like index.html, but loads js files asynchronously
  js/               --> javascript files
    app.js          --> application
    controllers.js  --> application controllers
    directives.js   --> application directives
    filters.js      --> custom angular filters
    services.js     --> custom angular services
  lib/              --> angular and 3rd party javascript libraries
    angular/
      angular.js        --> the latest angular js
      angular.min.js    --> the latest minified angular js
      angular-*.js      --> angular add-on modules
      version.txt       --> version number
  partials/             --> angular view partials (partial html templates)
    partial1.html
    partial2.html

config/karma.conf.js        --> config file for running unit tests with Karma
config/karma-e2e.conf.js    --> config file for running e2e tests with Karma

scripts/            --> handy shell/js/ruby scripts
  e2e-test.sh       --> runs end-to-end tests with Karma (*nix)
  e2e-test.bat      --> runs end-to-end tests with Karma (windows)
  test.bat          --> autotests unit tests with Karma (windows)
  test.sh           --> autotests unit tests with Karma (*nix)
  web-server.js     --> simple development webserver based on node.js

test/               --> test source files and libraries
  e2e/              -->
    runner.html     --> end-to-end test runner (open in your browser to run)
    scenarios.js    --> end-to-end specs
  lib/
    angular/                --> angular testing libraries
      angular-mocks.js      --> mocks that replace certain angular services in tests
      angular-scenario.js   --> angular's scenario (end-to-end) test runner library
      version.txt           --> version file
  unit/                     --> unit level specs/tests
    controllersSpec.js      --> specs for controllers
    directivessSpec.js      --> specs for directives
    filtersSpec.js          --> specs for filters
    servicesSpec.js         --> specs for services

generator-angular

Generador de Yeoman para AngularJS

npm install -g generator-angular
mkdir my-new-project && cd $_
yo angular [app-name]

Generadores:
angular, angular:controller, angular:directive, angular:filter, angular:route, angular:service, angular:provider, angular:factory, angular:value, angular:constant, angular:decorator, angular:view

AMD

Asynchronous Module Definition

RequireJS usa AMD para cargar módulos JavaScript (y archivos en general) asíncronamente.

SVN → html/plantilla/

⑤ Elaboración de un ejemplo simple de uso

SVN → /html/ejemplo/

Gracias :¬)