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.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

December 04, 2016
Tweet

Transcript

  1. JEDI MEAN Thulio Philipe @thulioph Web Developer

  2. (olá!) Apresentações

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

    @Unibratec Web Developer @Labcodes Team @Devbeers Lover @GoogleMaps
  4. (vamos lá!) Let's nessa

  5. Mean Stack Ciclo de uma aplicação MEAN

  6. Objetivo final goo.gl/DWIQuR

  7. None
  8. (A hackable text editor for the 21st Century) Atom

  9. Um moderno editor de texto, uma ferramenta que você pode

    customizar para fazer qualquer coisa. O que é?
  10. O Criador! Github

  11. electron.atom.io Um adendo.

  12. Outro adendo. Hyper Zeplin Postman WebTorrent Ionic Creator Brave Soundnode

    Ghost Visual Studio Slack
  13. Plugins Temas Menus e notificações nativas Integrações Gerenciamento de pacotes

    e plugins Snippets Features
  14. Emmet emmet.io Snippets

  15. IDE (Integrated Development Environment)

  16. IDE www.jetbrains.com/phpstorm

  17. IDE www.visualstudio.com

  18. IDE developer.apple.com/xcode/ide

  19. Editor de Texto (Text Editor)

  20. Editor de Texto brackets.io

  21. Editor de Texto atom.io

  22. Editor de Texto notepad-plus-plus.org

  23. Editor de Texto www.sublimetext.com

  24. Plataformas (funciona no windows.)

  25. Plataformas

  26. Custo? (a parte boa)

  27. Custo R$ 0,00 USD $0

  28. docs.emmet.io https://youtu.be/Y7aEiVwBAdk https://scotch.io/bar-talk/best-of- atom-features-plugins-acting-like- sublime-text https://github.com/mehcode/ awesome-atom Keep walking...

  29. None
  30. (Hypertext Markup Language) HTML

  31. O HTML foi desenvolvido para criação e disseminação de documentos

    na web. O que é?
  32. O Criador! Tim Berners Lee

  33. Acessibilidade Semântica API's Mais poderes Features

  34. < tags />

  35. <header> <footer> <main> <section> <article> <aside> <nav> Estruturais

  36. None
  37. None
  38. input text e-mail password tel search atributos validadores Formulários

  39. autoplay controls loop muted preload Áudio

  40. autoplay controls loop muted preload poster Vídeo

  41. (Application Programming Interface) API's

  42. canvas network status drag-and-drop web storage geolocation IndexedDB webRTC file

    media capture Web API's
  43. canvas network status drag-and-drop web storage geolocation IndexedDB webRTC file

    media capture Web API's
  44. (nem tudo são flores..) Compatibilidade

  45. Compatibilidade caniuse.com

  46. devdocs.io Compatibilidade

  47. https://en.wikipedia.org/wiki/HTML5 https://w3c.github.io/html/ https://www.sitepoint.com/10-html5- apis-worth-looking/ http://www.maujor.com/ Keep walking...

  48. None
  49. (Cascading Style Sheets) CSS

  50. É uma linguagem de folhas de estilo que definem apresentação

    de documentos escritos em uma linguagem de marcação. O que é?
  51. Os Criadores! Håkon Wium Lie Bert Bos

  52. Anatomia

  53. folhas de estilo externa folhas de estilo incorporada folhas de

    estilo inline Folhas de estilo
  54. Externas <link href="main.css" rel="stylesheet">

  55. Incorporadas <style type="text/css"> body { color: red; } </style>

  56. Inline <p style="color: red; font-size: 12px;"> Qualquer texto aqui dentro

    irá receber o estilo CSS da tag. </p>
  57. INTERações TRANSições ANIMações Possibilidades

  58. :hover // seletor:hover { propriedade: valor; } INTERações :active //

    seletor:active { propriedade: valor; } :focus // seletor:focus { propriedade: valor; }
  59. 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
  60. 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
  61. transition: margin-left 4s ease-in-out 1s; // aceita vários valores TRANSições

  62. 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
  63. 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
  64. animation-direction: normal; // ciclo e direção da animação animation-play-state: running;

    // quantas vezes a animação vai acontecer ANIMações
  65. animation: mover 4s linear 0s infinite alternate; ANIMações

  66. ANIMações @keyframes mover { from { margin-left: -20%; } to

    { margin-left: 100%; } }
  67. ANIMações @keyframes mover { 0% { margin-left: -20%; } 50%

    { margin-left: 38%; } 
 
 100% { margin-left: 100%; } }
  68. responsividade acessibilidade vários tamanhos de tela comportamentos diferentes conteúdos dinâmicos

    Media-Queries
  69. @media (min-width: 768px) { // tablets (iPads) } @media @media

    (min-width: 992px) { // telas normais (notebooks) } @media (min-width: 1200px) { // telas grandes (desktops) }
  70. (primeiro mobile) Mobile-First

  71. None
  72. (CSS com super poderes) Pré Processadores

  73. Adicionam funcionalidades legais, úteis e criativas para o CSS. Auxiliam

    na modularização e manutenção. O que é?
  74. Pop stars lesscss.org stylus-lang.com sass-lang.com

  75. variables nesting partials mixins extend operators Features

  76. (pra quem não sabe harmonizar as cores) Bibliotecas

  77. Ajudam na hora de personalizar e manipular o visual dos

    elementos. O que é?
  78. Pop stars milligram.github.io getbootstrap.com getmdl.io

  79. 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
  80. ter código CSS que nunca é utilizado curva de aprendizado

    mais lenta não está aprendendo a fazer você mesmo Problemas
  81. https://developer.mozilla.org/pt-BR/docs/ tag/CSS https://colorlib.com/wp/free-css3- frameworks/ pre-processadores.github.io/Sass-Guide tableless.com.br/sass-vs-less-vs-stylus- batalha-dos-pre-processadores https://edsonjunior.com/um-guia-visual- para-flexbox Keep

    walking...
  82. None
  83. (não tem nada a ver com Java) Javascript

  84. 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 é?
  85. Seu padrão é conhecido como ECMAScript. O que é?

  86. O Criador! Brendan Eich

  87. (var, let, const Variáveis

  88. var a; // undefined Variáveis var name = "simon"; //

    simon
  89. (if, switch) Condicionais

  90. var domingo = true;
 if (domingo) {
 // vou á

    praia
 } else { // vou estudar } Condicionais (domingo) ? 'praia' : 'estudar';
  91. 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
  92. (for, for...of, for...in, while) Loops

  93. Loops var cervejas = 0; for (cervejas; cervejas <= 10;

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

    ['Amstel', 'Heineken', 'Eisenbahn']; for (breja of brejas_array) { console.log('Já bebi ' + breja); }
  95. 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]); }
  96. Loops var cervejas = 0; while (cervejas <= 10) {


    console.log('Já bebi ' + cervejas + ' cervejas.');
 cervejas++; } while (true) {
 // pegadinha com o amiguinho. }
  97. (propriedade e tipos) Objetos

  98. Python (dicionários) Perl (hashes) Ruby (hashes) C e C++ (hash)

    Java (hashmaps) Parece com..
  99. Objetos var carro = new Object(); carro = { marca:

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

    rodas: Array[4]} carro.detalhes.rodas[1]
 // "2" carro.marca // "Volvo"
  101. (new Array(), ['', '', '']) Arrays

  102. 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
  103. Arrays var semana = [ 'Domingo', 'Segunda', 'Terça', 'Quarta-Feira', 'Quinta-Feira',

    'Sexta-Feira', 'Sábado' ]; semana.length // 7
  104. Arrays semana[0] // 'Domingo' semana[5] // 'Sexta' semana[semana.length - 1]

    // 'Sábado'
  105. Arrays semana.forEach(function(item, index, array) { console.log(item, index); });

  106. Arrays semana.unshift('Primeiro Dia'); semana.push('Último Dia'); semana.pop(); // remove o 'Último

    Dia'; semana.shift(); // remove o 'Primeiro Dia';
  107. Arrays var posicao; posicao = semana.indexOf('Terça'); // 3 semana.splice(posicao, 1);

    // ['Terça']
  108. (function() {};) Funções

  109. Funções function [nome]([param] [, param] [..., param]) { instruções }

  110. Funções function multiply(x, y) { console.log(arguments); return x * y;

    } multiply(4, 9); // 36
  111. 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); // ?
  112. Funções function Celular(marca, modelo, ano) { this.marca = marca; this.modelo

    = modelo; this.ano = ano; } var iPhone = new Celular('iPhone', '5s', 2016); iPhone // ?
  113. 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 // ?
  114. javascript.crockford.com/javascript.html https://developer.mozilla.org/pt-BR/docs/ Web/JavaScript/A_re- introduction_to_JavaScript https://developer.mozilla.org/pt-BR/docs/ Web/API https://developer.mozilla.org/pt-BR/docs/ Web/JavaScript/Guide Keep walking...

  115. None
  116. (MVVM) AngularJS

  117. O AngularJS é um framework javascript, que permite estender a

    sintaxe HTML. O que é?
  118. Framework JavaScript open-source, mantido pelo Google, que auxilia na execução

    e criação de SPA's. O que é?
  119. time de desenvolvimento da Google O criador!

  120. Data-binding

  121. data-binding MVC separação de responsabilidades testes adoção da comunidade SPA

    Google Mercado Porque usar?
  122. (conhecendo por dentro..) Anatomia

  123. modules directives model controller services Features

  124. ( angular.module() ) Modules

  125. 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
  126. ( angular.directive() ) Directives

  127. 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
  128. ng-click // instância do evento de click, onClick Directives ng-controller

    // especifica um controller ng-class // classes dinâmicas
  129. 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
  130. 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
  131. (ng-model) Model

  132. Model <div ng-app="myApp"> <div ng-controller="myCtrl"> <input type="text" ng-model="vm.name"> </div> </div>

    // HTML
  133. Model function myCtrl() { var vm; vm = this; vm.name

    = ''; vm.name2 = 'Shawlin'; } angular .module('myApp', []) .controller('myCtrl', myCtrl); // script
  134. Model <div ng-app="myApp"> <div ng-controller="myCtrl"> Name: {{vm.name}} Name 2: {{vm.name2}}

    </div> </div> // resultado
  135. ( angular.controller() ) Controller

  136. 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
  137. function myCtrl() { var vm; vm = this; vm.firstName =

    'Shawlin'; vm.lastName = 'Manju'; } angular .module('myApp', []) .controller('myCtrl', myCtrl); // script Controller
  138. <div ng-app="myApp"> <div ng-controller="myCtrl"> Nome completo: 
 {{vm.firstName}} + {{vm.lastName}}

    </div> </div> // HTML Controller
  139. ( angular.service() ) Services

  140. function myService($http) { function getData() { return $http.get(url).then().catch(); } return

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

    = myService.get(); } myCtrl.$inject = ['myService']; angular .module('myApp', []) .controller('myCtrl', myCtrl);
  142. (o divisor de águas.) Versões

  143. 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
  144. (não!) Só existe Angular?

  145. Só existe angular? vuejs.org backbonejs.org emberjs.com facebook.github.io/react

  146. https://angularjs.org https://angular.io aprendaangular2.online http://pt.slideshare.net/gustavocostaw/ angularjs-estado-atual http://www.typescriptlang.org/play/ Keep walking...

  147. None
  148. (NoSQL com par de chave e valor) MongoDB

  149. database === database table === collections rows === documents json

    query === query index === index partition === shard SQL / MongoDB
  150. 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?
  151. MemcacheDB Redis SimpleBD Project Voldemort MongoDB Maior escalabilidade?

  152. orientado a documentos (JSON/BSON) escalável / baixo custo de alto

    desempenho código aberto schemaless cluster / sharding / réplica / GridFs Features
  153. 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
  154. (escalabilidade com baixo custo) Cluster

  155. Cluster?

  156. (distribuição de dados em grandes volumes) Sharding

  157. Shardings?

  158. (espelhamento dos dados entre servidores) Réplica

  159. Réplica?

  160. (armazenamento dos arquivos binários) GridFs

  161. Sistema de armazenamento dos arquivos binários, que podem ser distribuídos

    pelos servidores. GridFs
  162. (mongod e mongo) Comandos

  163. Comandos database.coleção.função()

  164. use teste // criando um database show dbs // listando

    um database Comandos
  165. 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
  166. 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
  167. Comandos var query = { a : true } var

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

    // apaga a coleção db.dropDatabase() // apaga o banco
  169. 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...?
  170. https://docs.mongodb.com/ https://youtu.be/leYxsEAL_yY meumysql.blogspot.com.br/2011/06/o-que-e- um-banco-de-dados-em-cluster.html Keep walking...

  171. None
  172. (javascript all the things) NodeJS

  173. None
  174. É um interpretador de código JavaScript que funciona em qualquer

    coisa que você imaginar. O que é?
  175. Seu objetivo é ajudar programadores na criação de aplicações de

    alta escalabilidade. O que é?
  176. E é capaz de manipular dezenas de milhares de conexões

    simultâneas, numa única máquina física. O que é?
  177. se apaixonou? O que é?

  178. I/O assíncrono single thread event loop filesystem network other funções

    assíncronas por padrão Features
  179. O Criador! Ryan Dahl

  180. (fila infinita) Event Loop

  181. Não é mágica!

  182. (síncrono, assíncrono, restaurante e garçom) I/O

  183. síncrono.

  184. síncrono.

  185. assíncrono.

  186. assíncrono.

  187. (anywhere) Onde usar?

  188. automação residencial sites sistemas web aplicativos para celular aplicativos para

    desktop Onde usar?
  189. (um pessoal aí..) Alguém usa?

  190. umas empresas ai..

  191. umas empresas ai..

  192. (Node Package Manager) NPM

  193. 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
  194. https://github.com/creationix/nvm https://nodejs.org nodebr.com brazil.nodeconf.com https://youtu.be/OgfO37F6mdg Keep walking...

  195. (continue caminhando...) Keep walking...

  196. Developer Tools

  197. None
  198. Chrome DevTools

  199. Firefox DevTools

  200. Safari DevTools

  201. Generators

  202. None
  203. yeoman.io

  204. Task Runner, Module Bundler

  205. GruntJS GulpJS

  206. Webpack

  207. Web Analytics

  208. gtmetrix.com

  209. Google PageSpeed

  210. Google Analytics

  211. Share and Deploy

  212. Github Pages

  213. Heroku

  214. Firebase

  215. Be an expert.

  216. None
  217. Tableless &

  218. W3C &

  219. MDN &

  220. BrazilJS &

  221. CSS Tricks '

  222. A List Apart '

  223. HTML5 Rocks '

  224. Smashing Magazine '

  225. None
  226. 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
  227. None
  228. BrazilJS Weekly &

  229. CSS Weekly '

  230. Frontend Focus '

  231. Javascript Weekly '

  232. (muuuuito mais...) Tem mais...

  233. Híbridos Nativos

  234. baixo custo desenvolvimento mais rápido desenvolvimento multi-plataforma comunidade pouca "mão-de-obra"

    Híbrido
  235. None
  236. Nativos custo elevado desenvolvimento mais demorado restrito a uma única

    plataforma
  237. None
  238. Thulio Philipe @thulioph Web Developer goo.gl/cFtIoA Obrigado!