NodeJS

O que é?

Plataforma construída em cima da Chrome's V8 JavaScript engine  com modelo de I/O não bloqueante e orientado a eventos.

Chrome V8 Engine

Engine(em C++) criada para aumentar a performance na execução do JavaScript.

Usada tanto no client side(Google Chrome) quanto no server side(NodeJS)

Usa o modelo JIT(Just In Time)

Não produz bytecodes ou qualquer outro código intermediário

I/O Bloqueante

Uma chamada de operação bloqueia o fluxo do sistema até que a mesma seja concluída.

Mais threads(sub-processos) podem ser criadas pra dar suporte a mais requisições

I/O Não Bloqueante

Uma chamada de operação não bloqueia o fluxo do sistema.

Quando a operação precisa acessar uma base de dados, por exemplo, ela faz a requisição, sem no entanto bloquear o fluxo. Quando os dados solicitados à base estiverem prontos, a operação os recebe para que sejam usados.

Gerenciador de pacotes NodeJS(NPM)

npm  install [modulo] --save

Interface de

linha de comando(CLI)

npm  uninstall [modulo] --save

Repositório online

package.json

/node_modules

Principais comandos

Bower

Gerenciador de dependências para frontend

bower  install [componente] --save

Interface de

linha de comando(CLI)

Repositório online

bower.json

/bower_components

Principais comandos

bower  uninstall [componente] --save

AngularJS

O que é?

Framework client-side MV*(whatever), feito em JavaScript e usado para criação de Single Page Applications(SPA)

2 Way Data Binding(MVVM)

Técnica que mantém a sincronia entre os dados. Alterações no model são propagadadas para a view. Alterações na view são propagadas para o model.

Angular $scope

Elo de ligação entre a view e o model

Diretivas

Diretivas são extensões da linguagem HTML que permitem a implementação de novos comportamentos de forma declarativa.

<tabs>

    <tab-item title="Aba 1">Conteúdo da Aba 1</tab-item>

    <tab-item title="Aba 2">Conteúdo da Aba 2</tab-item>

    <tab-item title="Aba 3">Conteúdo da Aba 3</tab-item>

</tabs>

<ul class="nav nav-tabs">
    <li>
         <a href="#">Aba 1</a>
    </li>
    <li>
         <a href="#">Aba 2</a>
    </li>
    <li>
         <a href="#">Aba 2</a>
    </li>
  </ul>

  <div class="tab-content">
        <div style="" class="tab-pane">
            <span class="ng-scope">Conteúdo Aba 1</span>
        </div>
        <div class="tab-pane">
            <span class="ng-scope">Conteúdo Aba 2</span>
        </div>
        <div class="tab-pane">
            <span class="ng-scope">Conteúdo Aba 3</span>
        </div>
  </div>

Aba 1

Aba 2

Aba 3

Conteúdo Aba 2

Single Page Applications(SPA)

Aplicações que carregam um único arquivo HTML e o atualiza dinâmicamente à medida que o usuário interage com a aplicação

index.html

page1-tpl.html

ponto de carregamento

page2-tpl.html

page3-tpl.html

{ page1-data }

{ page2-data }

{ page3-data }

Web

SASS

Pré-processador

O que é?

Pré-processdores são ferramentas que extendem a capacidade do CSS.

Variáveis

$site-bg: blue;

body {
    background-color: $site-bg;
}


//CSS Processado
body {
   background-color: blue;
}

@function my-calculation-function($some-number, $another-number){
  @return $some-number + $another-number
}

.my-module {
  padding: my-calculation-function(10px, 5px);
}

//CSS processado
.my-module {
    padding:15px;
}

Funções

E muito mais...

Apache Cordova

O que é?

Conjunto de APIs que dão acesso aos recursos nativos do dispositivo.

História

O Apache Cordova surgiu da doação do source code do Phonegap(projeto criado pela Nitobi Software) para a Apache Software Foundation, durante a compra da Nitobi pela Adobe. Após a doação o projeto foi renomeado para Apache Callback, e logo em seguida definitivamente nomeado como Apache Cordova.

Diferenças entre Cordova e Phonegap

Phonegap é um distribuição do Apache Cordova, com funcionalidades/plugins mantidos pela Adobe. O Phonegap é para o Cordova, o que o Ubuntu é para o Debian.

Scaffold

Estrutura básica de um projeto Cordova/Phonegap

/** Project Scaffold */

cordova-app/
    hooks/
    platforms/
        android/
    plugins/
    www/
    config.xml



/* hooks directory */
/*Ações "ganchos" que podem ser inseridas em certos 
pontos no processo de build do Cordova.
/*

/* platforms directory */
/* Diretório onde ficam as plataformas adicionadas ao projeto. 
   Ex: Android, WP8, iOS
*/

/* plugins directory */
/* Diretórios para plugins usados no seu projeto Cordova. 
   Ex: Plugin para oauth com Facebook.
*/

/* www directory */
/* Diretório onde ficam os source codes do projeto. 
No processo de build, os arquivos deste diretório são processados e 
inseridos dentro do diretório das plataformas escolhidas para o build.
*/

/* config.xml file */
/* Arquivo comum  que guardam informações sobre o projeto e especifica 
parâmetros que afetam a forma de trabalhar do aplicativo, 
como por exemplo, podemos especificar se o aplicativo responde a orientação de tela.
*/

Performance

Híbrido

Nativo

Mas podemos otimizar

SPA (Single Page Application)

Touch Events

CSS Transitions

CSS Sprites

IONIC

O que é?

"Canivete suiço" para desenvolvimento de aplicativos usando tecnologias web 

Ecossistema Ionic

SDK

Ionic Creator

Ionic Market

Ionic Play

Ionic View

Ionic Showcase

NgCordova

Ionic Learn

Ionicons

Obrigado.