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.

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
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...
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
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...
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
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...
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...
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...
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...
172. (javascript all the things) NodeJS
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
198. Chrome DevTools
199. Firefox DevTools
200. Safari DevTools
201. Generators
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.
217. Tableless &
218. W3C &
219. MDN &
220. BrazilJS &
221. CSS Tricks '
222. A List Apart '
223. HTML5 Rocks '
224. Smashing Magazine '
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
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
236. Nativos custo elevado desenvolvimento mais demorado restrito a uma única plataforma
238. Thulio Philipe @thulioph Web Developer goo.gl/cFtIoA Obrigado!