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.

Avatar for Thulio Philipe

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