Desenvolvendo aplicações web

utilizando ferramentas atuais

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.

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

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.