Desenvolvendo uma aplicação Full Javascript

Palestra ministrada na Semana de Formação Geral em Informática do curso de Sistemas de Informação do IFAL (Instituto Federal de Alagoas) abordando o famoso MEAN - MongoDB, Express, AngularJs, Node.js e outras tecnologias úteis que estão nos proporcionando desenvolver sistemas inteiros usando apenas JavaScript. Aprenda o que cada tecnologia faz e como integrá-las a um ambiente automatizado de desenvolvimento .

Palestra feita por mim (Denis Vieira) , Djanilson Alves e João Victor Berta, relatando uma experiência de desenvolvimento que tivemos e passando um pouco do conhecimento de algumas tecnologias que utilizamos .

Transcript

1. Desenvolvendo uma aplicação Full Javascript
2. DENIS VIEIRA DJANILSON ALVES JOÃO VICTOR BERTA
3. •SINGLE-PAGE APPLICATION •BANCO DE DADOS NOSQL •ARQUITETURA MVC •API RESTFUL •WEBSOCKET
6. NoSQL ( Non Relational DB) • Bancos de dados que não utilizam o mesmo esquema de tabelas que os SGBDs comuns; • Altamente escaláveis; • Tipos: Documentos(MongoDb), Chave- Valor(Redis), Grafos(Neoj4).
7. COMPARAÇÃO SQL • Armazena os dados no formato de tabelas, em colunas e linhas; • Realiza Joins entre as Diferentes tabelas; • Utiliza os princípios ACID; • Possui o controle de transações. NOSQL • Armazena os dados em diversos formatos a depender do objetivo; • Não possui estrutura pré-definida; • Escalabilidade horizontal(Sharding).
8. Memcached/ Key Value-Store MongoDb Join Transações Relational SGBD
9. • Desenvolvido em C++ • Interface em JS • Orientado a documentos JSON • Genérico • Schemaless • Replica • Sharding
10. Node.js is a platform built on Google’s V8 JavaScript engine for easily building fast scalable network applicatioons. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, data- intensive real-time applications that run across distributed devices
11. •Event Driven; •Single-Threaded; •Event-loop; •Asynchronous I/O.
12. EVENT DRIVEN
13. Single-Threaded / Event-loop
14. Asynchronous I/O • I/O era o gargalo das aplicações • Não espera as operações de I/O acabarem para continuar executando.
15. Asynchronous I/O Callback Listeners
16. • Gerenciador de Pacotes • Repositório
17. WEB SERVER
19. • Utilizado para aplicação que necessitam de comunicação em tempo real; • Abstrai a complexidade dos WebSockets; • Fornece uma API simples para a aplicação cliente se comunicar.
21. PROS/CONTRAS PROS • Aplicação em tempo real; • Chat; • Aplicação Web; • Banco de dados não relacionais; • Data streaming; CONTRAS • Cpu intensive; • Necessidade de utilizar bancos relacionais.
22. Automatize seu Workflow
23. Por que usar GULP ? • Eficiente • Gulp usa o poder de streams do NodeJs, o que permite builds muitos mais rápidos. • Fácil de usar • Código para definir as configuração, o Gulp mantém as coisas simples e faz tarefas complexas gerenciável. • Fácil de aprender • Com uma API mínima, aprende-se a trabalhar com o Gulp quase que na hora!
24. Instalação
25. Gulpfile.js • Importe o gulp e os plugins associados às tarefas que deseja automatizar
26. 5 fatos importantes para criar e executar suas tarefas do gulpfile.js
27. gulp.task(glob, [deps], fn) • Define uma tarefa com dependências opcionais
28. Executando o gulpfile.js • Default, engloba todas as outras tarefas. Será executada ao entrar Gulp na linha de comando sem parâmetros adicionais.
29. Gulpfile watch • Watch, mantem o gulp rodando e esperando por eventos para tratá-los
30. Pré-Processadores CSS
31. Pré-Processadores CSS • Um pré-processador é um programa que recebe texto e efetua conversões léxicas nele. • • As conversões podem incluir substituição de macros, inclusão condicional e inclusão de outros ficheiros.
32. Premissas • Syntactically Awesome Style Sheets • (Folhas de estilo sintaticamente incríveis) • Don’t Repeat Yourself (DRY CSS) • CSS 'componentizado' Features • Variáveis • Mixins • Operacionais • Condicionais • loops
33. Don’t Repeat Yourself (DRY CSS) • Mude a cor de uma variável e o compilador faz o resto.
34. CSS Aninhado
35. MIXINS
36. Funções
37. @Import “fileName”;
39. SASS + GULP
40. Estrutura de arquivos Componetizando: Pra cada projeto uma public_html diferente mas a mesma SCSS. No geral o que mais muda é o diretório pages
43. Por que usar ? • Data Binding de 2 vias • Separação Lógica e Visão • Testabilidade • Componentização • Filtros, ordenação, etc. • Extensa documentação e components de terceiros • SPA, Single Page Application • Comunidade Ativa • Mantenedor: Google!
44. Utilização
45. POWERS http://curran.github.io/screencasts/introToAngular/exampleViewer
46. DEMONSTRAÇÃO MVP https://gitlab.com/fromdenisvieira/projetointegrador
48. Gerenciamento do Projeto Controle de Versão Hospedagem da API
49. O CHECKIN
50. HORÁRIO
51. O CHAT
53. • A Complete Guide to MEAN Stack : • https://github.com/ericdouglas/MEAN- Learning • • Get Started : https://hackhands.com/how- to-get-started-on-the-mean-stack/ • • Mastering MEAN : • https://masteringmean.com/ • • Palestra Be Mean( Jean Carlo “Suissa” ): http://www.infoq.com/br/presentations/be- mean#downloadPdf
54. Guia MongoDB • Mongo Db - https://www.mongodb.com/ • NoSql / Non Relational DB : https://www.mongodb.com/nosql-explained • Curso Gratuito : https://university.mongodb.com/ • NPM e Modulos - https://www.npmjs.com/ • Express - http://expressjs.com/ •
55. Guia SASS • Repositorio do Gulp no github • https://github.com/gulpjs • Travismaynard - Get started with Gulp • https://travismaynard.com/writing/getting- started-with-gulp • Repositório do Sass no github • https://github.com/sass/sass • Sass guide • http://sass-lang.com/guide
56. Guia AngularJS • Aprenda AngularJS com estes 5 Exemplos Práticos: - http://javascriptbrasil.com/2013/10/23/aprenda-angularjs-com-estes-5-exemplos- praticos/ • Guia Definitivo para se aprender AngularJS em um dia: - http://javascriptbrasil.com/2013/10/18/guia-definitivo-para-aprender-angularjs-em- um-dia/ • Tutorial de um CRUD Básico: http://www.youtube.com/watch?v=iCQ3qic_nGg • Lista de muitos e muitos recursos, vídeos e tutoriais: https://github.com/jmcunningham/AngularJS-Learning • Tutorial Oficial do AngularJS: http://docs.angularjs.org/tutorial • AngularJS Guide: http://docs.angularjs.org/guide/overview • Diversos tutoriais de varias features do AngularJS: https://egghead.io/technologies/angularjs • Design Patterns and Best Practices : http://trochette.github.io/Angular-Design- Patterns-Best-Practices/#/intro
57. OBRIGADO !