- O documento discute vários frameworks JavaScript, incluindo frameworks para back-end, front-end e fullstack. Também discute a importância da linguagem JavaScript e sua história.

1. Frameworks JS
Frameworks para Desenvolvimento Web
Prof. MSc. André Costa - andre.costa@unifacs.br

2. SUMÁRIO
• Frameworks JavaScript
• JS para Back-end
• JS para Front-end
• JS para Fullstack
• JS Diversos
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

3. FRAMEWORKS JAVASCRIPT (JS)
O que é JavaScript?
Uma linguagem de script criada pra deixar as páginas web
mais dinâmicas sem a necessidade de requisitar o
servidor, pois é interpretado diretamente no browser.
Utilizada para manipulação do Document Object Model
(DOM).
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

4. FRAMEWORKS JAVASCRIPT (JS)
A história do JavaScript?
• Criado pela Netscape (Brendan Eich) em 1995
• Sintaxe Java (parceria coma Sun)
• Mocha -> LiveScript -> JavaScript
• JScript da Microsoft
• ECMAScript (versão 8)
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

5. FRAMEWORKS JAVASCRIPT (JS)
Qual a importância do JavaScript?
• É a linguagem de programação mais utilizada no mundo (by RedMonk)
• Utilizando e praticamente em todos os sistemas web
• Aplicável a todas as plataformas (Web, Mobile, TV, HW e Desktop)
• Domina o desenvolvimento no Front-end
• Chegou com força no Back-end (Node.Js)
• Explosão de Frameworks JS (Fadiga?)
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

6. JS PARA BACK-END
• Não é linguagem e nem framework -> Plataforma
• Possibilita a utilização JavaScript no Servidor (vs PHP, JAVA, .NET, etc.)
• Orientado a eventos IO
• Protocolos: HTTP, DNS, Webocket (realtime). Troca de Arquivos (JSON)
• Threads não bloqueantes
• Não recomendado para sistemas Transacionais
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

7. JS PARA BACK-END
• Fortemente escalável
• Ideal para grandes portais (e-comerce)
• Feito em Chrome V8 JavaScript Engine (VM)
• Server-side Assíncrono
• Callbacks
• Diversos módulos:
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

8. JS PARA BACK-END
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

9. JS PARA BACK-END
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

10. JS PARA FRONT-END
Por que usar Framework JS no Front-end?
• Agilidade no desenvolvimento
• Segurança
• Cross Browser
• Data Bind (Reativo)
• Single Page Application (SPA)
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

11. JS PARA FRONT-END
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

12. JS PARA FRONT-END
• Framework JS para Front-end mantido pela Google
• Permite Data Bind, Deep Linking, Validação de formulário, Criação de
Componentes, RESTful, etc.
• Diretivas ng-*
• Site: https://angularjs.org/
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

13. JS PARA FRONT-END
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

14. JS PARA FRONT-END
• Versão atualizada e independente do AngularJS
• Mais moderno, rápido e simples
• Cross Platform - Aplicações mobile nativas
• Angular Universal (Back-end com NodeJS)
• Utiliza TypeScript (TS) da Microsoft
• Site: https://angular.io
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

15. JS PARA FRONT-END
• Biblioteca JavaScript para criação de UI mantido pelo Facebook
• Declarativa (e não Imperativa)
• Virtual DOM
• Renderização de Componentes na View
• React Native para desenvolvimento Mobile
• Site: https://reactjs.org
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

16. JS PARA FRONT-END
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

17. JS PARA FRONT-END
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
JSX com Babel

18. JS PARA FRONT-END
• Biblioteca JavaScript para Componentes Reativos e Data Bind
• Lançado em 2016 e tem ganhado grande destaque na comunidade
• Se assemelha com o Angular e React, porém mais simples
• Reativo e Moderno
• Virtual DOM (v2)
• Site: https://vuejs.org
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

19. JS PARA FRONT-END
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

20. JS PARA FRONT-END
• Framework JavaScript para ”grandes aplicações”
• Foco na produtividade
• Utilizado por sites como LinkeIn, Groupon, Twitch, etc.
• Baseado em Rotas, models, templates e componentes.
• Site: https://emberjs.com
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

21. JS PARA FRONT-END
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

22. JS PARA FRONT-END
• Framework JavaScript Front-end
• Seu criador fez parte do time do Angular e anteriormente já havia
criado o framework Durandal para SPAs
• Tem influencias do Angular 2
• Tem como principal proposta ser simples
• Site: http://aurelia.io
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

23. JS PARA FRONT-END
Qual o melhor framework/biblioteca para Front-end?
• Qual o objetivo?
• Conseguir emprego?
• Produtividade?
• Aprendizado?
• Qual se adequa melhor para o seu projeto?
• Qual teve mais facilidade de uso?
ECONTRAR O MELHOR PARA SUA REALIDADE
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

24. JS PARA FULLSTACK
Posso desenvolver um sistema web programando apenas em JavaScript?
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

25. JS PARA FULLSTACK
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa
• Framework para o desenvolvimento Fullstack em JS
• Contempla:
• Já dá suporte ao React
• Site: http://mean.io
• OBS.: MEAN não precisa necessáriamente ser através do Framework

26. • Plataforma JavaScript para Web, Desktop e Mobile
• Requer o Node.JS
• Contempla:
• Site: https://meteor.com
JS PARA FULLSTACK
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

27. JS DIVERSOS
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

28. • Plataforma para troca de mensagens em real-time
• Evento bidirecional
• Streaming de arquivos
• Ideal para Chat, Mensagens Instantâneas e Notificações
• Utilizado em aplicações Node.JS
• Site: http://socket.io
JS DIVERSOS
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

29. • Suíte com bibliotecas para criação de interações avançadas em HTML5
• Utilizadas para Jogos e animações em HTML5
• Utilizado no Adobe Animate (Antigo Flash) substituindo o ActionScript
• Bibliotecas JavaScripts para: EASELJS, TWEENJS, SOUNDJS e PRELOADJS
• Site: https://createjs.com
JS DIVERSOS
Frameworks para Desenvolvimento Web – Porf. MSc. André Costa

30. Prof. MSc. André Costa
andre.costa@unifacs.br