Tweet
Tweet

Slide 1

Slide 1 text

Como nasce um Framework para mais de 70 milhões de usuários? Felipe N. Moura @felipenmoura

Slide 2

Slide 2 text

About me Profissional: Terra / BrazilJS Pessoal: Criatividade e ciência Contatos: http://felipenmoura.org/ @felipeNmoura

Slide 3

Slide 3 text

Mergulhando...

Slide 4

Slide 4 text

De onde vêm os frameworks?

Slide 5

Slide 5 text

De onde vêm os frameworks? + inspiração + política + análise + testes + documentação + desenvolvimento + treinamentos + experiência + agilidade + estabilidade + segurança == - manutenção

Slide 6

Slide 6 text

+ agilidade + estabilidade + segurança == - manutenção De onde vêm os frameworks? + inspiração + política + análise + testes + documentação + desenvolvimento + treinamentos + experiência

Slide 7

Slide 7 text

Por que não usar um pronto? - experiencias anteriores não tão positivas - custo / know how - em casa

Slide 8

Slide 8 text

Desafio #1: Politics

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Pequenos módulos Jaydson e Alberto começam a criar por conta própria, alguns novos módulos independentes

Slide 11

Slide 11 text

Timing!!

Slide 12

Slide 12 text

Nova Capa

Slide 13

Slide 13 text

how about... a new framework, then?

Slide 14

Slide 14 text

how about... a new framework, then? ZaZ

Slide 15

Slide 15 text

how about... a new framework, then? ZaZ

Slide 16

Slide 16 text

Homenagem às origens

Slide 17

Slide 17 text

ZaZ !== NaN

Slide 18

Slide 18 text

Apesar de alguma resitência...

Slide 19

Slide 19 text

O time é montado … C4

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Felipe Beto

Slide 22

Slide 22 text

Ao time, foi dado: - liberdade - poder de decisão - responsabilidades - acesso

Slide 23

Slide 23 text

Um framework para o Terra, não para o Portal - mobile - desktop - tablet - webmail - buscador - SVAs - etc

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Não vou mentir... houveram baixas!

Slide 27

Slide 27 text

Com o tempo, vieram reforços! Átila

Slide 28

Slide 28 text

Desafio #2: Decisions, decisions, decisions!

Slide 29

Slide 29 text

No Scrum! DOG! (Desenvolvimento Orientado a Github)

Slide 30

Slide 30 text

Ciclo de vida das decisões...

Slide 31

Slide 31 text

Levantamento de alternativas

Slide 32

Slide 32 text

Ler, ler, e ler mais!

Slide 33

Slide 33 text

Sinuca!

Slide 34

Slide 34 text

Hora de testar e validar!

Slide 35

Slide 35 text

Sinuca! Sinuca!

Slide 36

Slide 36 text

Hora de escolher a oficial

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Definições e Premissas

Slide 39

Slide 39 text

Definições e Premissas Browsers: - As 3 últimas versões dos Major Browsers - Browser/Versão com mais de 1% de audiência

Slide 40

Slide 40 text

Definições e Premissas Browsers: - As 3 últimas versões dos Major Browsers - Browser/Versão com mais de 1% de audiência * 1% pode ser um número bem grande!

Slide 41

Slide 41 text

Definições e Premissas ES5: - Full support para features de ES5 - Uso de shims

Slide 42

Slide 42 text

Definições e Premissas ES5: - Full support para features de ES5 - Uso de shims * Há MUITOS shims problemáticos out there!

Slide 43

Slide 43 text

Definições e Premissas AMD: - Uso de AMD em projetos - Primariamente, utilizando Require.js

Slide 44

Slide 44 text

Definições e Premissas AMD: - Uso de AMD em projetos - Primariamente, utilizando Require.js * Require.JS! aff

Slide 45

Slide 45 text

Definições e Premissas SASS: - Uso de SASS nos projetos

Slide 46

Slide 46 text

Definições e Premissas SASS: - Uso de SASS nos projetos * É importante usar também sassLint

Slide 47

Slide 47 text

Definições e Premissas Nunjucks: - Adotamos Nunjucks para templates

Slide 48

Slide 48 text

Definições e Premissas Nunjucks: - Adotamos Nunjucks para templates * Nunjucks == Great * Nunjucks + Require.js == ¬¬

Slide 49

Slide 49 text

Desafio #3: Vícios

Slide 50

Slide 50 text

"USE STRICT";

Slide 51

Slide 51 text

USE THE FUCK STRICT!

Slide 52

Slide 52 text

HINT IT! (js, json, css, sass) * HTML Linters são MUITO lentos!

Slide 53

Slide 53 text

Unit Test EVERYTHING!

Slide 54

Slide 54 text

Desafio #4: Environment

Slide 55

Slide 55 text

- Sass - Ícones - Uglify - YUIDocs - Linters

Slide 56

Slide 56 text

Jenkins

Slide 57

Slide 57 text

zaz-center

Slide 58

Slide 58 text

Morph

Slide 59

Slide 59 text

Heimdal

Slide 60

Slide 60 text

Heimdal zaz.use(function(pkg){ // !include src/partials/foo.js });

Slide 61

Slide 61 text

J.a.r.v.i.S.

Slide 62

Slide 62 text

J.a.r.v.i.S.

Slide 63

Slide 63 text

BoTrr

Slide 64

Slide 64 text

BoTrr

Slide 65

Slide 65 text

Includer (BE e FE)

Slide 66

Slide 66 text

Watson

Slide 67

Slide 67 text

Desafio #5: Análise e Desenvolvimento

Slide 68

Slide 68 text

- O novo portal precisava ser feito. - O novo framework precisava ser feito

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

Ciclo de entrega - Desenvolvimento - Publicação em HLG - Publicação em PRD - Treinamento - Adaptação

Slide 71

Slide 71 text

zaz.use(function(pkg){ // do stuff with pkg }); Uso básico

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Contextos

Slide 74

Slide 74 text

browser page user platform Contextos

Slide 75

Slide 75 text

zaz.use(function(pkg){ console.log( pkg.context.page.list() ); }); pkg.context

Slide 76

Slide 76 text

zaz.use(function(pkg){ pkg.context.user.on('sign', function(newSign){ alert('mudou o signo para ' + newSign); }); }); Observáveis

Slide 77

Slide 77 text

zaz.use(function(pkg){ pkg.context.user.set('sign', 'cancer'); }); Observáveis

Slide 78

Slide 78 text

Factories

Slide 79

Slide 79 text

- Modules - Dictionaries - Components - Apps - Contents - UI Factories

Slide 80

Slide 80 text

- Modules - Dictionaries - Components - Apps - Contents - UI Factories

Slide 81

Slide 81 text

Factories: Modules zaz.use(function(pkg){ pkg.require(['modFactory'], function(ModFactory){ ModFactory.create({ name: "myMod", version: "1.0.0", setup: function(){}, teardown: function(){} }); }); }); … pkg.require(['mod.myMod'], function(myMod){...});

Slide 82

Slide 82 text

- Modules - Dictionaries - Components - Apps - Contents - UI Factories

Slide 83

Slide 83 text

Factories: Dictionaries pkg.require(['dictFactory'], function(DictFactory){ DictFactory.create({ name: "myDict", langs: { "global": { goal: ["gols", "gol"] }, "pt": { car: "Carro" }, "es": { car: "Coche" }, "en": { car: "Car" }, "pt-PT": { car: "Auto" } } }); });

Slide 84

Slide 84 text

- Modules - Dictionaries - Components - Apps - Contents - UI Factories

Slide 85

Slide 85 text

Factories: Components O mesmo que módulos, porém, DEVE retornar um objeto com: { API: { ... }, DOM: DOMElementNode }

Slide 86

Slide 86 text

- Modules - Dictionaries - Components - Apps - Contents - UI Factories

Slide 87

Slide 87 text

Factories: Apps zaz.use(function(pkg){ pkg.require(['appFactory'], function(AppFactory){ AppFactory.create({ name: "myApp", version: "1.0.0", dictionaries: [ ... ] templates: { ... } setup: function(__proto){}, init: function(){}, teardown: function(){} }); }); });

Slide 88

Slide 88 text

Factories: Apps(scopes) zaz.use(function(pkg){ pkg.require(['appFactory'], function(AppFactory){ var PRIVATE= {}, STATIC= null; AppFactory.create({ name: "myApp", setup: function(__proto){ STATIC= this; }, init: function(){ var PUBLIC= this; ... return PUBLIC; } ...

Slide 89

Slide 89 text

Factories: Apps(templates) Template:
${variable | capitalize } %car
Dentro do método init: var el= this.templates.render('tplId', { variable: "felipe" }); someContainer.appendChild(el);

Slide 90

Slide 90 text

%goal
Factories: Apps(templates/plurais) %goal(1) %goal(${numGoals}) this.templates.render('tplId', { numGoals: 3 });

Slide 91

Slide 91 text

var rendered= this.templates.render('tplId'); var comp= rendered.getComponents('componentName')[0]; comp.on('someEvent', function(data){...}); someContainer.appendChild(rendered); Factories: Apps(components)

Slide 92

Slide 92 text

- Modules - Dictionaries - Components - Apps - Contents - UI Factories TODO

Slide 93

Slide 93 text

Desafio #6: Terceiros

Slide 94

Slide 94 text

- Versões Stand Alone - Conflitos de CSS - IFrames? WebComponents? - Globais (JQuery, Require, Define…) - Reset + Normalize Desafio #6: Terceiros

Slide 95

Slide 95 text

Valeu! _\,,/ @felipeNmoura fb.com/felipeNmoura felipeNmoura.org