2017

Arquitectura Front-end Tools Ecap

David Álvarez García

Mobiground Software & Services
24/07/2017
 I+D PENDIENTE
Arquitectura CSS

1. ITCSS + BEMIT
Será necesaria documentación previa en arquitectura para la organización y
estructuración escalable de los estilos en las herramientas con meta-framework
ITCSS

Requerimientos :

 Curso Arquitectura profesional ITCSS ( 25h )

o Especificidad y herencia
o Arquitectura ITCSS y nomenclatura BEMIT
o Diseño de capas ITCSS
o ITCSS en producción
o Advanced ITCSS

Desarrollo :

 Integración ITCSS + VUEJS

o Análisis ( 2h )
o Integración y configuración de layers y global settings en proyecto vuejs
( 8h )
o Split y Compilación de estilos ( SCSS based ) a través de WEBPACK ( ver
sección Bundlers )

2. CSS LAYOUT MODULE

Documentación CSS GRID MODULE LAYOUT + Susy3 ( as fallback )

Requerimientos :

 Get Ready for CSS GRID – Rachel Andrew. Book ( 30h )

 Documentación Susy3 ( 16h )

1
Desarrollo:

 Desarrollo de CSS Grid module + Susy3 mediante @support closure. ( 16h )

 Pruebas de desarrollo y testeo en navegadores + correcciones scss ( 10h )

3. MODULE ANIMATION

SVG Animations ( 80h )

from Common UX Implementations to Complex Responsive Animation
Sarah Drasner

Publisher: O'Reilly Media

Release Date: March 2017
Pages: 246

 Responsive SVG, Grouping, and Drawing Paths

 SVG on Export
 Optimization Tools
 Animating with SVG
 Silky-Smooth Animation
 Keyframe Animation with steps() and SVG Sprites, Two Ways
 SVG Sprites and CSS for Responsive Development
 Grouping and DRYing It Out
 Context-Shifting in UX Patterns

2
 Responsive Reorganization with Multiple SVGs and Media Queries
 Animating Data Visualizations
o Animation in Data Visualization
o D3 with CSS Animation Example
o Chartist with CSS Animation Example
o Animating with D3
 Animations in Component Libraries
 MorphSVG

3
Arquitectura JAVASCRIPT

1. ES6 MODULES
2. USO DE PROMISES
3. PARADIGMA STORE FLUX CON VUEX
Documentación implementación de vuex en projecto vuejs como handler de estados y
mutaciones.

 Uso de Centralized State ( 3h )

 Uso de Getters ( 3h )
 Mapeo de Getter a Props ( 2h )
 Uso de Mutaciones ( 4h )
 Acciones en Mutaciones ( 2h )
 Mapeo de Acciones ( 1h )
 Uso de v-model con Vuex ( 1h )
 Modularizar el State Management ( 5h )
 Auto-Namespacing Vuex ( 1h )

4. Validation Module

 vue-validator ( 1h )
 vee-validate ( 1h )
 vue-rawmodel ( 1h )
 vuelidate ( 1h )
 custom

5. Internacionalization Module

4
  vue-i18n ( 2h )
 vuex-i18n ( 2h )
 vue-translate-plugin ( 1h )
 vue-gettext ( 1h )
 vue-multilanguage ( 1h )
 vue-ts-locale ( 1h )
 vue-i18next ( 1h )
 vue-polyglot ( 1h )

 v-localize ( 1h )

6. Scaffold project / tool / app ( 8h )

7. Registered Event listener as conditionals in vue ( 2h )

8. High-Order-Components ( 3h )

9. Functional Components ( 2h )

10. HTTP Interceptors ( 3h )

11. Unit Testing Vue Components with Jest ( 16h )

12. Unit Testing Vue Components with Karma ( 16h )

13. Webpack code splitting patterns ( 16h - bundlers)

14. Custom Viewports ( 3h )

5
Bundlers & Tasks Managers

 Webpack 2 como bundler principal ( i+D )

 Npm para tareas de scaffolding y secundarias

Requerimientos :

 Documentación de webpack (Webpack 2: The Complete Developer's Guide) ( 30h )

Roles y usuarios basado en permisos

 Definición de la administración de usuarios y permisos dentro de las

aplicaciones ( 2h )
 Requiere Análisis del desarrollo y estructuras a implementar dentro de la app
para gestionarlas:
o Custom directives
o State Driven
o […]

6
ARQUITECTURA FRONT-END

HTML

 Modular markup

o ESTANDAR HTML5 SEMANTICO

o Estandarización, Flexibilidad y automatización
<nav class="nav">
<ul class="nav__container">
<li class="nav__item">
<a href="# " class="nav__link">
<ul class="nav__container--secondary">
<li class="nav__item--secondary">
<a href="# " class="nav__link--secondary">

o BEM markup approach

 Block
Nombre del componente padre
 Element
Elemento dentro del bloque
 Modifier
Modificador asociado

<div class="toggle simple">

<div class="toggle-control">

7
 <h1 class="toggle-title">Title 1</h1>
</div>
<div class="toggle-details"> ... </div>

o SMACSS Class states approach

<div class="toggle-control is-active">
<div class="toggle-details is-open"> ... </div>

STYLES CSS + LAYOUT

Para el desarrollo de toda la arquitectura de estilos :

 Layout
 Componentes
 Animation

Se usara el preprocesador SASS en su versión 3.4 ( julio 2017 )

A falta de definir la compilación y hot reload con webpack, por defecto, se usarán
comandos de npm para realizar dicha labor, si bien el escenario ideal es utilizar solo un
bundler para procesar todas las tareas.

PENDIENTE DE ITCSS METAFRAMEWORK I+D

8
JAVASCRIPT ES6 + VUEJS

La parte de lógica, interactividad y data management en el cliente se desarrollará con

la versión ES6 de Javascript.

TRASPILER
Con el fin de mantener browser compatibility, ser usara Babel como traspiler en su
preset es2015.

JAVASCRIPT APPLICATION DESIGN AND ARQUITECTURE

Toda la parte javascript incluyendo:

 Construcción de interface
 Interactividad
 Manejo de datos
 Reactividad
 XHR

Será desarrollado con el Framework VueJS ( https://vuejs.org/ )

Se define como un framework progresivo para la construcción de interfaces. Se centra

únicamente en la vista, pero gracias a su modularidad nos permite añadir módulos que

9
se centran en otros áreas del desarrollo de una aplicación web como por ejemplo
ruteos, Xhr, store paradigm etc.

Vuejs está diseñado según el patrón MVVM moderno. Con la componentización como
core de su filosofía. Ver arquitectura de componentes en el siguiente punto.

PENDIENTE DE I+D javascript + vuex

10
DIAGRAMA WEB APLICATION

DATABASE

API REST

VUE JS APP

XHR REQUESTS

DATA BINDING

REACTIVE LOGIC

ACTIONS

LAYOUT

VIEW TEMPLATE

NO VUEX *

11
ARQUITECTURA DE COMPONENTES
La arquitectura del conjunto de aplicaciones estará basada en isolated UI components
implementados con jerarquía de árbol.

Road Runner Rules for components

 Un modulo/componente no puede tener más de una responsabilidad.
 NOT  var self = this; ( Estamos en ES6 ¡ )
 Un evento no puede ser disparado por más de una acción
 evitar this.$parent

MODULE BASED DEVELOPMENT

 Module > small self-contained part of an application. Vuejs está

específicamente diseñado para crear viewlogic modules.

 Rule > lo más pequeños y contenidos posible. Más fáciles de mantener, de

entender lo que hacen, de reusar y de testearlos. Como regla orientativa inicial
< 100 líneas de código.

 Tienen que trabajar en ISOLATION MODE

12
  Siguen la regla FIRST

o Focused

o Independent

o Reusable

o Small

o Testable 

 Un modulo ( Vue component ) sigue la regla de Single Responsibility

NOMENCLATURA VUE COMPONENTS

 2 – 3 palabras

 Con significado por si mismo, No excesivamente abstracto

 Con namespace añadido ( en caso de requerimiento )

<!-- recomendado -->

<app-header></app-header>
<user-list></user-list>
<bx-range-slider></bx-range-slider>

<!— a evitar -->

<btn-group></btn-group> <!-- corto. Usar `button-group`-->
<ui-slider></ui-slider> <!— cualquier componente es UI. Redundante -->
<slider></slider> <!— no es específico a un contexto -->

MANTENER EXPRESIONES SIMPLES

 Dentro del componente hay que mantener las expresiones js lo más simples
posibles, sobre todo las inline.

 Expresiones inline no son reusables y producen código duplicado

 La regla es que si es difícil de leer lo movemos a un método o una computada

13
PROPS PRIMITIVAS

 Intentar mantener las props con tipos primitivos si es posible

 Claridad en el componente y en el API

<bx-range-slider
:values="[10, 20]"
min="0"
max="100"
step="5"
:on-slide="updateInputs"
:on-end="updateResults">
</bx-range-slider>

PROPS MUST-HAVE

 Usar default values

 Validar mediante Type

ESTRUCTURA DEL COMPONENTE

 Usar template-script-style para los archivos .vue ( siempre que no se splitee

alguna de las secciones )
o Template
o Script
o Style

 Alfabetizar métodos y propiedades

 Agrupar las secciones dentro de la lógica

o Name ( añadir siempre name para devtools )
o EXTENDS
o PROPS
o DATA Y COMPUTADAS
o COMPONENTES
o WATCH Y MÉTODOS
o MÉTODOS DE CICLO DE VIDA

<template lang="html">
<div class="Ranger__Wrapper">

14
 <!-- ... -->
</div>
</template>

<script type="text/javascript">
export default {
// Do not forget this little guy
name: 'RangeSlider',
// compose new components
extends: {},
// component properties/variables
props: {
bar: {}, // Alfabetizadas
foo: {},
fooBar: {},
},
// variables
data() {},
computed: {},
components: {},
// methods
watch: {},
methods: {},
// component Lifecycle hooks
beforeCreate() {},
mounted() {},
};
</script>

<style scoped>
.Ranger__Wrapper { /* ... */ }
</style>

NOMBRES DE EVENTOS

 Nomenclatura kebab-case
 Un evento es disparado por una única acción
 Seguimos la Google Web Components Style Guide :

o Event names should have a prefix strongly related to the name of the element
in use (e.g drive-upload-success vs upload-succeeded). This allows you to drop
in multiple elements in the page without event namespacing clashing.

o It’s fine to simplify things a bit if your element name is complex, as long as the
relationship is unambiguous (e.g., for a load event on a <google-client-api-
loader> element, use google-client-api-load instead of google-client-api-
loader-load).

o A unique event name should be fired for unique actions in your element that
will be of interest to the outside world.

15
 o Events should either end in verbs in the infinitive form (e.g. google-client-api-
load) or nouns (e.g google-drive-upload-success).

o Use declarative event handlers over JS based (e.g. don't

write addEventListener in your element code).

THIS.$PARENT ESTÁ BANEADO

 Un componente trabaja aislado, no debe saber quien es su padre o si lo hay.

 Si tiene que acceder al padre se convierte en no reusable
 Antipattern
 Para evitarlo
o Props
o Callbacks
o Emitir eventos

NOMBRE DE COMPONENTE COMO SCOPE PARA ESTILOS

<style scoped>
/* RECOMENDADO */
.my-comp { }
.my-comp li { }
.my-comp __item { }

/* no !! */
.comp-X { } </style>

16
ROAD MAP DESARROLLOS PREVIOS
Lista de tareas y desarrollo previos a la realización de la primera
app/tool

Diseño Base tools

Se requerirá un diseño base de la app tools ( 16h – 30h )

 Estructura
 Fuente
 Escala tipográfica
 Paleta de colores

Organización y desarrollo base previa CSS

Desarrollo ITCSS framework

 Desarrollo layers ITCSS básicas ( pendiente de actualizar tiempos tras I+D )

o Settings ( 4h )

o Tools ( 4h )

o Generic ( 4h )

o Base ( 4h )

o Objects ( 4h )

o Components

o Trumps ( 1h )

Components Layer ser irá alimentando junto con el desarrollo de cada componente en concreto dentro de cada SFC o
en la carpeta de la layer de itcss

 Integración de Layout Module dentro de ITCSS FW ( 4h )

 Definición y desarrollo de estructuración en media queries ( 10h )

17
Animation Module
 Desarrollo de Keyframes Animations base e integración con fw itcss.
Nomenclatura Vue
o Modals ( 4h )
o Notifications ( 3h )
o Remove / Add Elements ( 3h )
o Reorder Elements ( 6h )
o Show/Hide sections ( 2h )
o Collapses ( 1h )
o Page Transitions ( 3h )
 Animaciones con SVG
 Desarrollo de Custom directives ( 16 h )
 Coordinate State con Vuex / lifecycle hooks

Icons Module
 FontAwesome components for vue ( 1h )
 Fontaxti ( 6H )
o Más ligera
o Necesario crear tus propios iconos
o Crear el componente vue que los gestione

Tools Base Layout

 Login ( 3h )
 Menu ( 1h )
 Header ( 2h )
 Footer ( 1h )
 Body ( 1h )
 Collapsible menu ( ver componente )
 Collapsible side-bar ( ver componente )

18
 Responsive menu ( 4h )

19
BrixUI-CLI

 Develop base Node Package Module ( 16h )

 Link and Publish ( 1h )
 Create Tool ( 6h )
 SubRoutes ( 3h )
 Create component ( 8h )
 Create Page ( 4h )
 Create Directive ( 3h )
 Create high-order-Component ( 3h )

Desarrollo estructuras base VUEjs

 Scaffold project ( 3h )
 Implementación de VUEX
 Implementación de Internacionalización
 Implementación de Validation Module
 Implementación de Unit Testing
 Implementacion de Split patterns
 Implementación de Usuarios / permisos / roles
 Implementación de Routes | Nested routes ( 5h )
 Custom viewports ( si fuera necesario )
 Interceptors ( si fuera necesario )

20
VUE-CLI CUSTOM TEMPLATE REPO

Creación de custom repo a partir de webpack simple en vue-cli. Con los

módulos necesarios para el scaffold de una tool básica.

( 8h )
vue init username/repo my-project

Desarrollo de Componentes BASICOS Compartidos

BrixUI

Cada componente estima maquetación, desarrollo e integración en BrixUI

 BUTTON bx-button ( 1h )
o Primary button ( 1h )
o Secondary button ( 1h )
o Loading button ( 3h )
o Icon button ( 1h )

 BUTTON GROUP bx-button-grp ( 2h )

 RADIO bx-radio ( 2h )
o Radio Buttons ( 2h )

 CHECKBOX bx-checkbox ( 2h )
o checkbox Buttons ( 2h )

 INPUT bx-input ( 2h )
o Icon input ( 1h )
o Input Number ( 4h )

 TEXTAREA bx-textarea ( 2h )

 SELECT bx-select ( 2h )

 SELECT2 ( integración componente ) ( 2h )

21
 SWITCH
o Maquetación ( 5h )
o Logica ( 1h )

 TIMEPICKER – DATEPICKER ( integración componente ) ( 4h )

 UPLOAD IMAGE ( 4h )

o Drag & drop ( 6h )

 DATATABLE ( 16H )

o Actions columns ( 6h )

o Sort ( 4h )

o Pagination ( 8h )

o Hidden info columns ( 6h )

 PROGRESS BAR ( 2h )

 BADGE ( 2h )

 ALERT ( 4h )

 NOTIFICATION ( 4h )

 NAV ( 5h )

o collapsible nav ( 5h )

o COLLAPSIBLE SIDE-BAR ( 4h )

 DROPDOWN MENU ( 5h )
o Tree structure ( 6h )

 BREADCRUMPS ( 3h )

 TABS ( 8h )

 TOOLTIP ( 5h )

22
 CARD ( 5h )

 CARROUSEL ( integración componente) ( 4h )

 COLLAPSIBLE ( 5h )

 MODAL + SLOTS ( 12h)

 WYSWYGET HTML EDITOR ( integración componente / I+D ) ( 10h )

 PANEL + SLOT ( 6h )

23
API DOCUMENTATION

CODIGO PARTE SCSS

 ITCSS FW
o SassDoc
 Se está usando en Common styles movistar. Hay que hacer un update
a la versión 2 ( 1H – 3H)

CÓDIGO PARTE JAVASCRIPT

 VUE COMPONENTS
o Propdoc
 Documenta componentes
 Obliga a crear data y propiedades dentro de cada componente
 verboso
o Webpack documentation-loader
o jsDoc-Vue + JsDoc ( I+D)
 https://github.com/QingWei-Li/jsdoc-vue#readme
 JS MODULES AND CLASSES
o JsDoc ( I+D)

STYLE GUIDE
 VUE STYLEGUIDIST ( I+D)

24
STEPS DESARROLLO DE UNA TOOL/APP

DISEÑO UI/UX
En primer lugar se requerirá el mockup, bien plasmado en papel u otro soporte
( powerpoint … )

Tras discusión sobre el mismo, se pasará a realizar el diseño, siempre que sea
necesario ( Photoshop, sketch … ) como guía y previsualización del mismo

MAQUETACIÓN DEL DISEÑO

Fase donde se procede a la maquetación html / css de las distintas páginas, secciones
y componentes necesarios para la misma

En caso de nuevos componentes se deberán incorporar e implementar dentro de

BrixUI, siempre que se cataloguen como shared components

ANALISIS TOOL/APP
Definición de los componentes / páginas y arquitectura interna de la tool en vue

 Análisis previo
 Estructuracion modular de la aplicación/ tool
 Definición de patrones de comunicación que se usarán entre componentes
o Unidirectional data flow
o Custom events
o callbacks
o Event bus
o store
 Definición de estados, mutaciones y acciones ( flux )
 Definición de requisito de modelo con los datos necesarios

25
DESARROLLO FAKE API NODE
Se desarrollara primeramente un API REST ( o la tecnología para el endpoint que
finalmente se opte por desarrollar para la capa del api ) en Node con las enpoints
necesarios al modelo

En sucesivas tools, se añadirán a dicho restful los nuevos endpoints de dichas

herramientas o aplicaciones

SCAFFOLD APP/TOOL
 MPA
o Scaffold project con Vue-CLI
 Webpack simple distribution

SCAFFOLD APP/TOOL BRIX-CLI

Crear las distintas estructuras de la aplicación a través de brix-cli

 Scaffold base tool Project con Brix-CLI ( >> )

 Component struture
 Logic and settings Vue Pages
 XHR settings
 Data Bindings
 Write Unit Test

26
WELLCOME PACK
Herramientas y entorno de desarrollo

DEVELOPMENT ENVIROMENT

EDITOR

Atom preferiblemente.

Se puede optar por sublime o visual studio code

 ATOM

https://atom.io/

 VISUAL STUDIO

https://code.visualstudio.com/

27
  SUBLIME TEXT 2

http://www.sublimetext.com/2

INTALACIÓN DE PAQUETES MINIMOS BÁSICOS

 Atom-Alignement
 Emmet
 KeyBinding Resolver
 File-Icons
 Js-hyperclick
 Language-babel
 Language-vue
 Language-scss
 Linter
 Pigments ( o similar )
 Vue-hyperclick
 git

28
NODE

Instalación DE ENTORNO NODE versión LTS

v6.11.1 LTS ( julio 2017)

NPM

Intalación de Gestor de paquetes para node

> npm install npm@latest –g

CONTROL DE VERSIONES

GIT

https://git-scm.com/book/es/v1/Empezando-Instalando-Git

DIRECCIÓN DE REPOSITORIOS TOOLS ECAP ( JAVIER >>)

29
VUE AND VUE-CLI

Prerequisites: Node.js (>=4.x, 6.x preferred), npm version 3+ and Git.

$ npm install -g vue-cli

---
$ vue init <template-name> <project-name>

TEMPLATE
Se Usará en un primer momento la template de webpack simple

[ La versión webpack viene con unit testing incorporada. Si karma finalmente es usado como
motor de test, la versión webpack sería la template básica a usar, en caso contrario, podemos
crear una template propia con el motor de testing, por ejemplo Jest ]

https://github.com/vuejs-templates/webpack-simple

$ npm install -g vue-cli

$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev

DEBUGGING TOOLS

VUE-DEV-TOOL FOR CHROME

https://chrome.google.com/webstore/detail/vuejs-devtools/
nhdogjmejiglipccpnnnanhbledajbpd?hl=es

30
VUE-DEV-TOOLS FOR FIREFOX

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

OVERVIEW VUE-DEV-TOOLS
https://alligator.io/vuejs/vue-devtools/

31