TDC2016SP - Trilha Frameworks JavaScript
0 gostou•166 visualizações
O documento resume as principais razões para escolher o framework Ember.js em 2016, destacando suas características como convenção sobre configuração, separação de interesses entre componentes e o sistema de objetos inspirado em Ruby. Também descreve recursos como o Ember CLI para criação de projetos, o Ember Data para manipulação de modelos e o FastBoot para renderização do lado do servidor.
TDC2016SP - Trilha Frameworks JavaScript
- 1. POR QUE ESCOLHER O EMBER.JS COMO FRAMEWORK EM 2016?
- 2. @eduardojmatos eduardomatos.me OI, EU SOU O EDU
- 3. a maior plataforma de contratação de serviços do Brasil
- 4. ANTES, PINGOS NOS I'S
- 5. FRAMEWORK • Uma abstração de códigos comuns entre vários projetos; • Conjunto de conceitos usado para resolver um problema de um domínio específico; • Conjunto de classes que auxilia no desenvolvimento de software.
- 7. SPA • Single Page Application: uma página que carrega conteúdo, toda a interface e faz toda comunicação com o servidor via JavaScript; • Controla todas as rotas de URL’s via History API; • Implementa requisições Ajax; • Controla o conteúdo via template engines.
- 9. OK, E POR QUE EMBER?
- 12. BRINKS =D
- 13. RAILS LIKE • Router • Addons == Gems • Ember Data == ActiveRecord • Convention over Configuration
- 14. CONVENTION OVER CONFIGURATION • pequenas decisões feitas pelo framework; • best practices; • benefício de conhecimento de outras pessoas; • ainda permite liberdade, apesar de algumas coisas serem built-in (router - controller - template, por exemplo).
- 15. SEPARAÇÃO DE INTERESSES • Cada parte do Ember tem um trabalho bem definido; • A separação por pastas, por exemplo, ajuda nisso; • Routes, Controllers e components - tudo separado e com sua responsabilidade.
- 16. OBJECT SYSTEM • É fato que poucos entendem o Prototype; • O Ember tem um sistema de objetos, inspirado no Ruby; • Classes, heranças, mixins. Tudo no Ember.Object.
- 17. EMBER-CLI npm install -g ember-cli ember new tdc-app
- 19. A MAGIA ACONTECE *depois de 2 horas de npm install
- 20. NADA DE CONFIGURAÇÃO EXTREMA • Já adiciona o package.json e o bower.json; • Cria os diretórios e arquivos base; • Usa um build system (o broccoli); • JSHint, Livereload, Module System (ES6 modules), ES6 transpilation (babel); • Adiciona framework de teste (QUnit); • Sistema de addon;
- 22. GENERATORS ember generate component icon-tag
- 23. GENERATORS ember generate controller profile
- 25. CUTTING EDGE • ES6 • Promises • Modules • Várias features graças ao Babel • Web components (logo mais com Glimmer Components)
- 26. ADDONS • Compartilhamento de código built-in • Comunidade on fire! • 2612 fucking addons
- 30. ESTABILIDADE SEM FICAR PARADO • Usa semantic versioning; • Tem versão LTS (long term support); • Último release recente: 27/06 (agora pouco); • Usam RFC (Release for Candidate).
- 32. GLIMMER • Nova engine de renderização; • Usando o conceito de Virtual DOM; • Performance de render como o React.
- 34. EMBER-DATA • Addon pra manipular models; • É agnóstico, ou seja, não se importa se com o mecanismo de persistência (seja JSON API via HTTP ou WebSockets, ou IndexedDB storage); • Usa Promises pra carregar/salvar dados; • Provê algumas facilidades que ORM como ActiveRecord proporciona, mas com JS.
- 35. export default DS.Model.extend({ email: DS.attr('string'), password: DS.attr('string'), fullName: DS.attr('string'), birthDate: DS.attr('date'), lead: DS.belongsTo('lead'), });
- 36. EMBER-INSPECTOR
- 38. FASTBOOT • Roda sua aplicação Ember no server, com Node.js!
- 39. QUEM TÁ USANDO?
- 40. PROBLEMINHAS • Componentes dentro de componentes versus data-down; • Tamanho da aplicação (500kb + ou -);
- 41. MAS, SERVE PRA EU? • Curva não tão grande de aprendizado; • Alinhamento/refactor do back-end pra usar JSONAPI do ember-data; • Se a complexidade do app é tamanha, sim. Se não, melhor usar o Backbone de boas =D
- 42. VOCÊ PRECISA MESMO DE UMA SPA?
- 43. SIM? EMBER RULES
- 44. DOIS RECADINHOS =D • Para as meninas: FrontinVale está com call4paperz aberto (50% dos palestrantes serão mulheres)! • Fórum FrontendBR: https://frontendbr.github.io
- 45. [email protected] @eduardojmatos http://eduardomatos.me OBRIGADO ;) GetNinjas contrata front-end: https://getninjas.workable.com/