Desenvolvendo aplicações web

utilizando ferramentas atuais

Quem sou Eu?

Emerson Mellado, prazer

Sou apaixonado por tecnologia, café e carpintaria...

Full Stack Developer

Full o quê?

Stack = Pilhas... sacou?

Vamos falar sobre abstração.

O que é programar?

Abstração

substantivo feminino 1. Operação intelectual em que um objeto de reflexão é isolado de fatores que comumente lhe estão relacionados na realidade. 2. O resultado dessa operação (termo, ideia, concepção etc.); abstrato.

Exemplo de abstração

(1) uma publicação (2) um jornal (3) O Estadão (4) a edição de 18 de fevereiro do Estadão (5) a minha cópia da edição de 18 de fevereiro do Estadão (6) a minha cópia da edição de 18 de fevereiro edição do Estadão como estava quando a peguei pela primeira vez (em contraste com como ficou a minha cópia poucos dias depois: na fogueira que fiz, queimando)

Arquitetura básica (muito básica) de um webApp moderno

Alguém vê algo estranho aqui?

Arquitetura básica (ainda básica) de um webApp moderno, mas vista do jeito certo.

MVVM - Model - View - View - Model

MVW - Model - View - Whatever

Cliente - Servidor: O que cada um faz?

Tecnologias

Show me the code!!

Bora ver um exemplo

Cliente - Javascript

function linkify( selector ) {
  if( supports3DTransforms ) {

    var nodes = document.querySelectorAll( selector );

    for( var i = 0, len = nodes.length; i < len; i++ ) {
      var node = nodes[i];

      if( !node.className ) {
        node.className += ' roll';
      }
    }
  }
}
					

Servidor - Javascript

var Hapi = require('hapi'),
    environment = require('./environment/environment.js'),    
    routes = require('./routes'),
    db = require('./lib/db.js'),    
    server = new Hapi.Server();

server.connection({
    host: environment.server.host,
    port: environment.server.port,
    routes: { cors: true}
});
server.views({
    path: './src/public/templates',
    engines: { html: require('handlebars') },
    partialsPath: './src/public/templates/withPartials',
    helpersPath: './src/public/templates/helpers'
});										
							

Onde entra o trio tormento? HTML/CSS/javaScript? Eu sabia essa com laranjas

• HTML => View : Simples assim
• CSS => View : Simples assim
• javaScript => View Model Controller Whatever : Simples assim, também

HTML

linguagem de marcação utilizada na construção de páginas na Web

Existe programador HTML?

E HTML 5?

• Formalizada na década de 90
• HTML 3.5 no final de 1997
• Mantida pela W3C - World Wide Web Consortium
• HTML 5 - 2008

HTML do pudim.com.br

E o CSS?

CSS - Folha de estilo em cascata

linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML

Acompanha o HTML, igual goiabada com queijo.

Alguém programa só em CSS?

éééé depende... vamos considerar os pre-processadores? Stylus, SaaS, Less

Exemplos: Black - White - League - Sky - Beige - Simple Serif - Blood - Night - Moon - Solarized => Voltar ao normal

• Time to javaScript!!!

E esse tal de javaScript?

ES6 jQuery AngularJS

javaScript não é Java

Es6 ou Es6/2015

ECMA Script - javaScript padrão da comunidade, alternativa ao JScript (M$)

• Escopos não serão mais tãooo confusos
• Novos tipos no parser: ex: const
• Diferenciação entre classes e functions com construtores
• Herança com suporte a super construtores super()
• Notação mais direta. ex: => e ${}

jQuery

• selectors... muitos selectors
• callbacks
• plugins... (my precious)
• a biblioteca mais usada e conhecida de javaScript

angular

• controllers
• rotas
• diretivas
• filtros
• injeção de dependência
• muitos exemplos e documentação
• idealizado pelo google

react

• mais coisas, menos código
• modificadores
• listeners
• muitos exemplos e documentação
• idealizado pelo facebook

Por onde começar?

• Integrável
• Rápido
• Fácil
• Divertido

nodeJs é um wrapper

V8 Google JavaScript Engine

Non-blocking I/O - Evento Loop e Single Thread

wrapper é um empacotador, um grande programa com pequenos programas dentro.

seu principal objetivo é dar suporte a criação de aplicações escaláveis.

pode ser usado para desenvolvimento tanto backend quanto frontend.