Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MEAN Jedi

MEAN Jedi

Curso em parceria com a Academia Jedi sobre a MEAN Stack com ênfase no front-end. Em adição ao conteúdo, falo um pouco sobre o universo front-end, ferramentas, algumas estratégias para se manter atualizado, boas práticas, HTML5, CSS3, etc.

Thulio Philipe

December 04, 2016
Tweet

More Decks by Thulio Philipe

Other Decks in Technology

Transcript

  1. Thulio Philipe @thulioph Web Developer Design Gráfico @Unibratec Web Apps

    @Unibratec Web Developer @Labcodes Team @Devbeers Lover @GoogleMaps
  2. Um moderno editor de texto, uma ferramenta que você pode

    customizar para fazer qualquer coisa. O que é?
  3. É uma linguagem de folhas de estilo que definem apresentação

    de documentos escritos em uma linguagem de marcação. O que é?
  4. :hover // seletor:hover { propriedade: valor; } INTERações :active //

    seletor:active { propriedade: valor; } :focus // seletor:focus { propriedade: valor; }
  5. transition-delay: 0s; // delay antes da transição iniciar TRANSições transition-duration:

    0s; // o tempo que a transição irá levar transition-property: all; // qual propriedade irá sofrer transição
  6. transition-timing-function: ease; // modo que os valores são intermediados transition-timing-function:

    linear; // modo que os valores são intermediados transition-timing-function: ease-in-out; // modo que os valores são intermediados TRANSições
  7. animation-name: minhaAnimacao; // nome da animação ANIMações animation-duration: .25ms; //

    duração da animação animation-timing-function: ease; // modo que os valores são intermediados
  8. animation-delay: 0s; // delay antes da animação iniciar animation-iteration-count: infinite;

    // quantas vezes a animação vai acontecer animation-fill-mode: none; // modificador que é adicionado a animação ANIMações
  9. ANIMações @keyframes mover { 0% { margin-left: -20%; } 50%

    { margin-left: 38%; } 
 
 100% { margin-left: 100%; } }
  10. @media (min-width: 768px) { // tablets (iPads) } @media @media

    (min-width: 992px) { // telas normais (notebooks) } @media (min-width: 1200px) { // telas grandes (desktops) }
  11. construção acelerada código mais limpo solução para problemas comuns compatibilidade

    entre os navegadores desenvolvendo através de um padrão auxilia no trabalho em grupo Features
  12. ter código CSS que nunca é utilizado curva de aprendizado

    mais lenta não está aprendendo a fazer você mesmo Problemas
  13. O Javascript é conhecido como a linguagem de script para

    páginas web que suporta vários estilos: orientada a objetos, imperativo e funcional. O que é?
  14. var domingo = true;
 if (domingo) {
 // vou á

    praia
 } else { // vou estudar } Condicionais (domingo) ? 'praia' : 'estudar';
  15. var domingo = 'praia';
 switch (domingo) { case 'praia': //

    vai pra praia break; case 'piscina': case 'churrasco': // vai pra piscina break; default: // fica em casa dormindo } Condicionais
  16. Loops var cervejas = 0; for (cervejas; cervejas <= 10;

    cervejas++) { console.log('Já bebi ' + cervejas + ' cervejas.'); }
  17. Loops var brejas_array, breja; brejas_array = new Array(); brejas_array =

    ['Amstel', 'Heineken', 'Eisenbahn']; for (breja of brejas_array) { console.log('Já bebi ' + breja); }
  18. Loops var brejas_obj, breja; brejas_obj = { 'Amstel': 'IBU 6',

    'Heineken': 'IBU 10', 'Eisenbahn': 'IBU 8' }; for (breja in brejas_obj) { console.log(breja + ' = ' + brejas_obj[breja]); }
  19. Loops var cervejas = 0; while (cervejas <= 10) {


    console.log('Já bebi ' + cervejas + ' cervejas.');
 cervejas++; } while (true) {
 // pegadinha com o amiguinho. }
  20. Objetos var carro = new Object(); carro = { marca:

    'Volvo', novo: true, detalhes: { color: 'Black', year: '2016', abs: true, rodas: ['1', '2', '3', '4'] } };
  21. Objetos carro['detalhes'] // Object {color: "Black", year: "2016", abs: true,

    rodas: Array[4]} carro.detalhes.rodas[1]
 // "2" carro.marca // "Volvo"
  22. Arrays var semana = new Array(); semana[0] = 'Domingo'; semana[1]

    = 'Segunda'; semana[2] = 'Terça'; semana[3] = 'Quarta-Feira'; semana[4] = 'Quinta-Feira'; semana[5] = 'Sexta-Feira'; semana[6] = 'Sábado'; semana.length // 7
  23. Funções function add() { var sum, i, j; sum =

    0; i = 0; j = arguments.length; for (i; i < j; i++) { sum += arguments[i]; } return sum; } add(2, 3, 4, 5); // ?
  24. Funções function Celular(marca, modelo, ano) { this.marca = marca; this.modelo

    = modelo; this.ano = ano; } var iPhone = new Celular('iPhone', '5s', 2016); iPhone // ?
  25. Funções function Pessoa(nome, idade, sexo, aparelho) { this.nome = nome;

    this.idade = idade; this.sexo = sexo; this.aparelho = aparelho; } var Thulio = new Pessoa('Thulio', 26, 'M', iPhone); Thulio // ?
  26. angular.module('myApp'); // obtém um módulo Modules <div ng-app="myApp"> // aqui

    dentro vem seu código </div> angular.module('myApp', []); // cria um módulo
  27. ng-init // inicia os dados de uma aplicação Directives ng-model

    // realiza o bind entre view - controller ng-app // inicia uma aplicação angular
  28. ng-click // instância do evento de click, onClick Directives ng-controller

    // especifica um controller ng-class // classes dinâmicas
  29. ng-show / ng-hide // mostra ou esconde um elemento Directives

    ng-if // responsável por condicionais ng-repeat // responsável pelo loop em um array
  30. ng-include // incluir um conteúdo HTML Directives ng-view // responsável

    pela manipulação de rotas ng-submit // evento de submit para formulários
  31. Model function myCtrl() { var vm; vm = this; vm.name

    = ''; vm.name2 = 'Shawlin'; } angular .module('myApp', []) .controller('myCtrl', myCtrl); // script
  32. Controller <div ng-app="myApp"> <div ng-controller="myCtrl"> Primeiro Nome: 
 <input type="text"

    ng-model="vm.firstName">
 
 Último Nome: 
 <input type="text" ng-model="vm.lastName"> </div> </div> // HTML
  33. function myCtrl() { var vm; vm = this; vm.firstName =

    'Shawlin'; vm.lastName = 'Manju'; } angular .module('myApp', []) .controller('myCtrl', myCtrl); // script Controller
  34. function myService($http) { function getData() { return $http.get(url).then().catch(); } return

    { get: getData }; } myService.$inject = ['$http']; angular .module('myApp', []) .service('myService', myService); Services
  35. Services function myCtrl(myService) { var vm; vm = this; vm.lista

    = myService.get(); } myCtrl.$inject = ['myService']; angular .module('myApp', []) .controller('myCtrl', myCtrl);
  36. Versões v1.js v2.ts renderização no server compilação para linguagem nativa

    renderização em diversos ambientes multiplataforma compilação nativa velocidade, desempenho
  37. database === database table === collections rows === documents json

    query === query index === index partition === shard SQL / MongoDB
  38. quando seu banco de dados relacional não aguenta mais requisições

    crescentes e o servidor ja está no seu máximo, utilize um banco NoSQL. quando necessitar de alta escalabilidade ou disponibilidade. Onde usar?
  39. orientado a documentos (JSON/BSON) escalável / baixo custo de alto

    desempenho código aberto schemaless cluster / sharding / réplica / GridFs Features
  40. 4-byte é o timestamp 3-byte é o identificador da máquina

    2-byte é o id do processo 3-byte é o contador que começa com valor randômico ObjectID
  41. db.teste.insert({ a: true }) // inserindo diretamente via parametro var

    obj = { b: 'número 2' } db.teste.insert(obj) // inserindo via variável var meuArray = [{}, {}, {}] db.teste.insert(meuArray) // inserindo com array Comandos
  42. Comandos db.teste.find() // lista todos os dados de uma coleção

    var query = { a : true } db.teste.find(query) // lista um registo passando uma variável
  43. Comandos var query = { a : true } var

    obj = db.teste.findOne(query) obj.a = false db.teste.save(obj) // edita um dado da coleção
  44. Comandos db.teste.remove({}) // apaga os dados e mantém coleção db.teste.drop()

    // apaga a coleção db.dropDatabase() // apaga o banco
  45. operadores aritméticos operadores lógicos $or, $nor, $and, $ne busca em

    arrays operadores de alteração em arrays $push, $pull count ordenação relacionamento Tem mais...?
  46. E é capaz de manipular dezenas de milhares de conexões

    simultâneas, numa única máquina física. O que é?
  47. npm init // inicia um package.json NPM npm install <nome-do-pacote>

    --save // instala um pacote no projeto npm install <nome-do-pacote> -g // instala um pacote globalmente
  48. Leo Balter @leobalter Diego Eis @diegoeis Zeno Rocha @zenorocha Eduardo

    Shiota @shiota Jean Carlo Emer @jcemer Sérgio Lopes @sergio_caelum Davidson Fellipe @davidsonfellipe Juarez Filho @juarezpaf Ciro Nunes @cironunesdev Eduardo Lundgren @eduardolundgren Almir Filho @almirfilho Caio Gondim @caio_gondim