MEAN Jedi

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!