SlideShare uma empresa Scribd logo
1 / 19
JavaScript
Aula 09
2 / 19
JavaScript Bibliotecas
● A linguagem JavaScript é uma das bases do
desenvolvimento web e, juntamente com a HTML e as
CSS, dão vida a boa parte dos sites da internet.
● Apenas essas linguagens juntas já nos permitem
desenvolver páginas completas, com layouts elegantes
e conteúdo dinâmico.
● Portanto, pode-se dizer que conhecê-las é obrigação
de todo profissional que pretende trabalhar com
desenvolvimento web.
3 / 19
JavaScript Bibliotecas
● Assim como outras linguagens, ao longo dos anos a
JavaScript foi sendo aperfeiçoada e ganhando cada vez
mais importância no meio web.
● Atualmente, é uma linguagem que tem ganhado mais
adeptos, uma vez que observamos uma tendência das
aplicações de serem transferidas para a web.
● Então, como era de se esperar, foram sendo criados vários
plug-ins/frameworks/bibliotecas para se trabalhar com
JavaScript, visando facilitar o uso dessa linguagem em
tarefas comuns do dia a dia do desenvolvedor web.
4 / 19
JavaScript Bibliotecas
● Jquery:
– A jQuery está entre as mais utilizadas (se não a mais
utilizada) bibliotecas JavaScript. Atualmente, quando se
requisita que um profissional conheça/domine
JavaScript, geralmente a jQuery está incluída.
– Sob o lema “escreva menos, faça mais” (write less, do
more), o forte dessa biblioteca está na simplificação de
códigos nativos da linguagem que geralmente são mais
extensos.
5 / 19
JavaScript Bibliotecas
● Temos um exemplo bastante básico de uso da
jQuery, onde comparamos duas expressões
equivalentes, uma em código nativo JavaScript e
outra utilizando jQuery.
6 / 19
JavaScript Bibliotecas
● Esse é apenas um exemplo, dos mais simples
possíveis, a jQuery vai muito além, permitindo criar
animações etc.
● A jQuery é a biblioteca sobre a qual foi
desenvolvida a maior quantidade de plug-ins e
outras biblioteca, incluindo a jQuery Mobile e a
jQueru UI, da mesma empresa responsável pela
jQuery, a jQuery Foundation.
7 / 19
Angular JS
8 / 19
Angular Js
● O AngularJS ou, Angular para os íntimos. Descrito
por seus criadores como um framework JavaScript
supereróico, ele trouxe um novo conceito de
desenvolvimento front-end e deu início a nova era
dos web apps.
9 / 19
Angular Js
● A premissa do Angular é ser um Framework MV*
(Model – View – Qualquer Coisa) para
desenvolvimento do front-end de aplicações web,
ou seja, que rodam dentro do navegador do cliente.
10 / 19
Angular Js
● Muitos frameworks são desenvolvidos por pessoas
talentosas apaixonadas pelo que fazem, o que nos dá
sistemas maravilhosos e muito gostosos de usar.
Agora, como deve ser um framework feito por um time
inteiro de pessoas talentosas, apaixonadas pelo que
fazem e que ainda recebem uma quantia considerável
de dinheiro para evoluir o projeto?
● O Angular foi desenvolvido por um analista do Google e
adotado e incubado pela Gigante de Mountain View.
Eles mesmos já o estão usando em mais de 1600
projetos internos.
11 / 19
Angular Js
● Exemplo:
https://codepen.io/algaworks/pen/qNZvEV
12 / 19
Node.js
● O objetivo declarado do Node é “fornecer uma maneira
fácil de criar programas de rede escaláveis”.
● Qual é o problema com os programas de servidor
atuais? Vamos fazer as contas. Em linguagens como
Java™ e PHP, cada conexão inicia um novo
encadeamento que, potencialmente, é acompanhado
de 2 MB de memória.
● Em um sistema que tenha 8 GB de RAM, isto define o
número máximo teórico de conexões simultâneas em
cerca de 4.000 usuários.
13 / 19
Node.js
● À medida que sua base de clientes cresce, você deseja que seu aplicativo da
Web suporte mais usuários e, portanto, será necessário adicionar mais
servidores.
● É claro, isso se soma a custos de negócios, especificamente custos de servidor,
custos de tráfego e custos de mão de obra. Adicione a esses custos o problema
técnico potencial de que um usuário poderá usar diferentes servidores para cada
solicitação, de forma que quaisquer recursos compartilhados deverão ser
compartilhados por todos os servidores.
● Por exemplo, no Java, variáveis estáticas e caches precisam ser compartilhados
entre as JVMs em cada servidor. Este é o gargalo de toda a arquitetura de
aplicativos da web, o número máximo de conexões simultâneas que um servidor
pode tratar.
14 / 19
Node.js
● O Node soluciona o problema mudando a forma como uma conexão é feita no
servidor.
● Em vez de iniciar um novo encadeamento do SO para cada conexão (e alocar a
memória correspondente com ele), cada conexão cria um processo, que não
requer que o bloco de memória o acompanhe.
● O Node alega que nunca ocorrerá um impasse de bloqueios, pois não são
permitidos bloqueios e ele não bloqueia diretamente para realizar chamadas de
E/S.
● O Node também alega que um servidor que o execute pode suportar dezenas de
milhares de conexões simultâneas.
● De fato, o Node altera o panorama do servidor ao mudar o gargalo do sistema
inteiro do número máximo de conexões para a capacidade de tráfego de um
único sistema.
15 / 19
Node.js
● Como o Node funciona?
– O Node propriamente dito executa V8 JavaScript. Espere, JavaScript no
servidor? Sim, você leu corretamente.
– O JavaScript no lado do servidor é um conceito relativamente novo, e há
cerca de dois anos, aqui no developerWorks, ele foi mencionado em uma
discussão sobre o produto Aptana Jaxer.
– Apesar de o Jaxer nunca ter chegado a tanto, a ideia em si não era tão
absurda — por que não usar no cliente a mesma linguagem de
programação que você usa no servidor?
16 / 19
Node.js
● O mecanismo V8 JavaScript é o mecanismo subjacente do JavaScript
que o Google usa com seu navegador Chrome.
● Poucas pessoas pensam sobre o que de fato ocorre com o JavaScript
no cliente.
● Um mecanismo JavaScript, de fato, interpreta o código e o executa.
Com o V8, o Google criou um interpretador ultrarrápido escrito em C++
que tem um aspecto exclusivo: é possível fazer o download do
mecanismo e integrá-lo em qualquer aplicativo que você desejar.
● Ele não é restrito à execução em um navegador. Portanto, o Node, na
verdade, usa o mecanismo V8 JavaScript escrito pelo Google e o
redireciona para uso no servidor. Perfeito! Por que criar uma nova
linguagem quando há uma boa solução já disponível.
17 / 19
ReactJS
● React é uma biblioteca para criar interfaces.
● Isso é ótimo, ele vai resolver toda aquele
amontoado de código com jQuery que tínhamos
para manipular o DOM. Agora podemos criar coisas
performáticas e reutilizáveis de verdade.
● Ele vai bem em várias situações e tipos de
projetos, independente do tamanho.
18 / 19
ReactJS
● Essa biblioteca surgiu em 2011, no Facebook, e
passou a ser utilizada na interface do mural de
notícias da rede social.
● No ano seguinte, passou a integrar também a área
de tecnologia do Instagram e de várias outras
ferramentas da empresa. Em 2013, o código foi
aberto para a comunidade, o que colaborou para
sua grande popularização.
19 / 19
Trabalho Pesquisa
● Trabalho escrito e apresentado sobre:
– Jquery, Angular JS, Node.js, ReactJS,
BACKBONE.JS, D3.JS, EMBER.JS, Vue.Js
● Trabalho deve conter conceitos sobre o
framework/biblioteca e exemplos de utilização.

Mais conteúdo relacionado

ODP
Aula01-JavaScript
ODP
Aula16 - Jquery
ODP
Aula02 - JavaScript
PPTX
A Evolução do Front end
PDF
Blazor #SnetTalks3
PDF
Java script vs vb script
PDF
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
PDF
LabMM3 - Aula teórica 04
Aula01-JavaScript
Aula16 - Jquery
Aula02 - JavaScript
A Evolução do Front end
Blazor #SnetTalks3
Java script vs vb script
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
LabMM3 - Aula teórica 04

Mais procurados (20)

PDF
DOMinando JavaScript
PDF
Aula Introdução a VRaptor 4 - Pós Java UTFPR
PDF
(A04 e A05) LabMM3 - JavaScript
PDF
JavaScript Moderno
PDF
Tutorial JSP parte 1
PDF
Javascript
PPTX
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
PDF
No core do node js - entendendo como a plataforma trabalha
PDF
Desenvolvimento rápido de aplicações com JEE e JavaFX
PDF
T03_LM3: Javascript (2013-2014)
PDF
Presenter for OpenSim
PPTX
Curso de Node.js e MongoDB - 03
PDF
Webforms2
PDF
Introdução ao java fx e visage
PDF
Introdução ao vraptor
PDF
Introdução ao Drupal
PDF
Introdução ao Ruby on Rails
PPTX
Node.js
PPTX
Introdução ao Asp.Net Mvc
PDF
JavaScript: uma visão geral da linguagem e seu ecossistema
DOMinando JavaScript
Aula Introdução a VRaptor 4 - Pós Java UTFPR
(A04 e A05) LabMM3 - JavaScript
JavaScript Moderno
Tutorial JSP parte 1
Javascript
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
No core do node js - entendendo como a plataforma trabalha
Desenvolvimento rápido de aplicações com JEE e JavaFX
T03_LM3: Javascript (2013-2014)
Presenter for OpenSim
Curso de Node.js e MongoDB - 03
Webforms2
Introdução ao java fx e visage
Introdução ao vraptor
Introdução ao Drupal
Introdução ao Ruby on Rails
Node.js
Introdução ao Asp.Net Mvc
JavaScript: uma visão geral da linguagem e seu ecossistema
Anúncio

Semelhante a Aula09 - Java Script (20)

PPTX
Desenvolvimento web - conceitos, tecnologia e tendências.
PPTX
Hangout Tempo Real Eventos - Nodejs - Os Primeiros Passos
PDF
Front end architecture
PPTX
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
PPTX
Introdução ao desenvolvimento da web.pptx
PPS
Iniciação JSP!
PPTX
NodeJS - Tutorial de forma simples e pratica.
PPTX
Node.js - Devo adotar na minha empresa?
PPT
Nodejs justdigital
PPTX
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
PDF
Apresentação CEJS - Do nada para a nuvem
PPTX
Introdução ao VUE JS
PPTX
AngularJS - Universidade Positivo - Trabalho
PPTX
Introdução sobre desenvolvimento web
PDF
O que move a web atualmente?
PDF
GDG ABC Meetup #5 - Tendências 2015
PDF
Angular 4 Ionic 3 Cordova 5
PPT
Javascript levado a serio
PDF
1409243945064
PPTX
Workshop - Ionic + firebase
Desenvolvimento web - conceitos, tecnologia e tendências.
Hangout Tempo Real Eventos - Nodejs - Os Primeiros Passos
Front end architecture
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
Introdução ao desenvolvimento da web.pptx
Iniciação JSP!
NodeJS - Tutorial de forma simples e pratica.
Node.js - Devo adotar na minha empresa?
Nodejs justdigital
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin -...
Apresentação CEJS - Do nada para a nuvem
Introdução ao VUE JS
AngularJS - Universidade Positivo - Trabalho
Introdução sobre desenvolvimento web
O que move a web atualmente?
GDG ABC Meetup #5 - Tendências 2015
Angular 4 Ionic 3 Cordova 5
Javascript levado a serio
1409243945064
Workshop - Ionic + firebase
Anúncio

Mais de Jorge Ávila Miranda (20)

ODP
Aula15 - Array PHP
ODP
Aula13 - Estrutura de repetição (for e while) - PHP
ODP
Aula14 - Funções em PHP
ODP
Aula Herança
ODP
Aula05 - Poojava
ODP
ODP
Aula11 - PHP
ODP
ODP
Aula08 - Java Script
ODP
Aula07 - JavaScript
ODP
Aula04-POOJAVA
ODP
Aula06 - JavaScript
ODP
Aula05-JavaScript
ODP
Aula04-JavaScript
ODP
Aula03 - JavaScript
ODP
Aula07 - Arquitetura e Manutenção de Computadores
ODP
Aula06 - Arquitetura e Manutenção de Computadores
ODP
Aula05 - Informática Básica
ODP
Aula04 - Informática Básica
ODP
Aula05 - Lógica de Programação
Aula15 - Array PHP
Aula13 - Estrutura de repetição (for e while) - PHP
Aula14 - Funções em PHP
Aula Herança
Aula05 - Poojava
Aula11 - PHP
Aula08 - Java Script
Aula07 - JavaScript
Aula04-POOJAVA
Aula06 - JavaScript
Aula05-JavaScript
Aula04-JavaScript
Aula03 - JavaScript
Aula07 - Arquitetura e Manutenção de Computadores
Aula06 - Arquitetura e Manutenção de Computadores
Aula05 - Informática Básica
Aula04 - Informática Básica
Aula05 - Lógica de Programação

Último (20)

PPTX
Aula16ManipulaçãoDadosssssssssssssssssssssssssssss
PPTX
Curso de Java 13 - (JavaEE (JSP e Servlets)).pptx
PPTX
BANCO DE DADOS - AULAS INICIAIS-sgbd.pptx
PDF
20250805_ServiceNow e a Arquitetura Orientada a Serviços (SOA) A Base para Ap...
PPTX
Aula 18 - Manipulacao De Arquivos python
PDF
Fundamentos de gerenciamento de ordens e planejamento no SAP TransportationMa...
PPTX
Curso de Java 12 - (JDBC, Transation, Commit e Rollback).pptx
PDF
Fullfilment AI - Forum ecommerce 2025 // Distrito e Total Express
PPTX
Curso de Java 10 - (IO Manipulação de Arquivos).pptx
PDF
COBITxITIL-Entenda as diferença em uso governança TI
PPTX
Aula sobre desenvolvimento de aplicativos
PPTX
Curso de Java 11 - (Serializable (Serialização de Objetos)).pptx
PPTX
Curso de Java 15 - (Uso de Servlets (Entendendo a Estrutura)).pptx
PPTX
Aula sobre banco de dados com firebase db
PPTX
Programação - Linguagem C - Variáveis, Palavras Reservadas, tipos de dados, c...
PPTX
Curso de Java 17 - (JEE (Sessões e Cookies)).pptx
PDF
Apple Pippin Uma breve introdução. - David Glotz
PPTX
Curso de Java 14 - (Explicações Adicionais (Classes Abstrata e Interface)).pptx
PDF
Processos na gestão de transportes, TM100 Col18
PPTX
Curso de Java 16 - (JEE (Utilizando o Padrão MVC)).pptx
Aula16ManipulaçãoDadosssssssssssssssssssssssssssss
Curso de Java 13 - (JavaEE (JSP e Servlets)).pptx
BANCO DE DADOS - AULAS INICIAIS-sgbd.pptx
20250805_ServiceNow e a Arquitetura Orientada a Serviços (SOA) A Base para Ap...
Aula 18 - Manipulacao De Arquivos python
Fundamentos de gerenciamento de ordens e planejamento no SAP TransportationMa...
Curso de Java 12 - (JDBC, Transation, Commit e Rollback).pptx
Fullfilment AI - Forum ecommerce 2025 // Distrito e Total Express
Curso de Java 10 - (IO Manipulação de Arquivos).pptx
COBITxITIL-Entenda as diferença em uso governança TI
Aula sobre desenvolvimento de aplicativos
Curso de Java 11 - (Serializable (Serialização de Objetos)).pptx
Curso de Java 15 - (Uso de Servlets (Entendendo a Estrutura)).pptx
Aula sobre banco de dados com firebase db
Programação - Linguagem C - Variáveis, Palavras Reservadas, tipos de dados, c...
Curso de Java 17 - (JEE (Sessões e Cookies)).pptx
Apple Pippin Uma breve introdução. - David Glotz
Curso de Java 14 - (Explicações Adicionais (Classes Abstrata e Interface)).pptx
Processos na gestão de transportes, TM100 Col18
Curso de Java 16 - (JEE (Utilizando o Padrão MVC)).pptx

Aula09 - Java Script

  • 2. 2 / 19 JavaScript Bibliotecas ● A linguagem JavaScript é uma das bases do desenvolvimento web e, juntamente com a HTML e as CSS, dão vida a boa parte dos sites da internet. ● Apenas essas linguagens juntas já nos permitem desenvolver páginas completas, com layouts elegantes e conteúdo dinâmico. ● Portanto, pode-se dizer que conhecê-las é obrigação de todo profissional que pretende trabalhar com desenvolvimento web.
  • 3. 3 / 19 JavaScript Bibliotecas ● Assim como outras linguagens, ao longo dos anos a JavaScript foi sendo aperfeiçoada e ganhando cada vez mais importância no meio web. ● Atualmente, é uma linguagem que tem ganhado mais adeptos, uma vez que observamos uma tendência das aplicações de serem transferidas para a web. ● Então, como era de se esperar, foram sendo criados vários plug-ins/frameworks/bibliotecas para se trabalhar com JavaScript, visando facilitar o uso dessa linguagem em tarefas comuns do dia a dia do desenvolvedor web.
  • 4. 4 / 19 JavaScript Bibliotecas ● Jquery: – A jQuery está entre as mais utilizadas (se não a mais utilizada) bibliotecas JavaScript. Atualmente, quando se requisita que um profissional conheça/domine JavaScript, geralmente a jQuery está incluída. – Sob o lema “escreva menos, faça mais” (write less, do more), o forte dessa biblioteca está na simplificação de códigos nativos da linguagem que geralmente são mais extensos.
  • 5. 5 / 19 JavaScript Bibliotecas ● Temos um exemplo bastante básico de uso da jQuery, onde comparamos duas expressões equivalentes, uma em código nativo JavaScript e outra utilizando jQuery.
  • 6. 6 / 19 JavaScript Bibliotecas ● Esse é apenas um exemplo, dos mais simples possíveis, a jQuery vai muito além, permitindo criar animações etc. ● A jQuery é a biblioteca sobre a qual foi desenvolvida a maior quantidade de plug-ins e outras biblioteca, incluindo a jQuery Mobile e a jQueru UI, da mesma empresa responsável pela jQuery, a jQuery Foundation.
  • 8. 8 / 19 Angular Js ● O AngularJS ou, Angular para os íntimos. Descrito por seus criadores como um framework JavaScript supereróico, ele trouxe um novo conceito de desenvolvimento front-end e deu início a nova era dos web apps.
  • 9. 9 / 19 Angular Js ● A premissa do Angular é ser um Framework MV* (Model – View – Qualquer Coisa) para desenvolvimento do front-end de aplicações web, ou seja, que rodam dentro do navegador do cliente.
  • 10. 10 / 19 Angular Js ● Muitos frameworks são desenvolvidos por pessoas talentosas apaixonadas pelo que fazem, o que nos dá sistemas maravilhosos e muito gostosos de usar. Agora, como deve ser um framework feito por um time inteiro de pessoas talentosas, apaixonadas pelo que fazem e que ainda recebem uma quantia considerável de dinheiro para evoluir o projeto? ● O Angular foi desenvolvido por um analista do Google e adotado e incubado pela Gigante de Mountain View. Eles mesmos já o estão usando em mais de 1600 projetos internos.
  • 11. 11 / 19 Angular Js ● Exemplo: https://codepen.io/algaworks/pen/qNZvEV
  • 12. 12 / 19 Node.js ● O objetivo declarado do Node é “fornecer uma maneira fácil de criar programas de rede escaláveis”. ● Qual é o problema com os programas de servidor atuais? Vamos fazer as contas. Em linguagens como Java™ e PHP, cada conexão inicia um novo encadeamento que, potencialmente, é acompanhado de 2 MB de memória. ● Em um sistema que tenha 8 GB de RAM, isto define o número máximo teórico de conexões simultâneas em cerca de 4.000 usuários.
  • 13. 13 / 19 Node.js ● À medida que sua base de clientes cresce, você deseja que seu aplicativo da Web suporte mais usuários e, portanto, será necessário adicionar mais servidores. ● É claro, isso se soma a custos de negócios, especificamente custos de servidor, custos de tráfego e custos de mão de obra. Adicione a esses custos o problema técnico potencial de que um usuário poderá usar diferentes servidores para cada solicitação, de forma que quaisquer recursos compartilhados deverão ser compartilhados por todos os servidores. ● Por exemplo, no Java, variáveis estáticas e caches precisam ser compartilhados entre as JVMs em cada servidor. Este é o gargalo de toda a arquitetura de aplicativos da web, o número máximo de conexões simultâneas que um servidor pode tratar.
  • 14. 14 / 19 Node.js ● O Node soluciona o problema mudando a forma como uma conexão é feita no servidor. ● Em vez de iniciar um novo encadeamento do SO para cada conexão (e alocar a memória correspondente com ele), cada conexão cria um processo, que não requer que o bloco de memória o acompanhe. ● O Node alega que nunca ocorrerá um impasse de bloqueios, pois não são permitidos bloqueios e ele não bloqueia diretamente para realizar chamadas de E/S. ● O Node também alega que um servidor que o execute pode suportar dezenas de milhares de conexões simultâneas. ● De fato, o Node altera o panorama do servidor ao mudar o gargalo do sistema inteiro do número máximo de conexões para a capacidade de tráfego de um único sistema.
  • 15. 15 / 19 Node.js ● Como o Node funciona? – O Node propriamente dito executa V8 JavaScript. Espere, JavaScript no servidor? Sim, você leu corretamente. – O JavaScript no lado do servidor é um conceito relativamente novo, e há cerca de dois anos, aqui no developerWorks, ele foi mencionado em uma discussão sobre o produto Aptana Jaxer. – Apesar de o Jaxer nunca ter chegado a tanto, a ideia em si não era tão absurda — por que não usar no cliente a mesma linguagem de programação que você usa no servidor?
  • 16. 16 / 19 Node.js ● O mecanismo V8 JavaScript é o mecanismo subjacente do JavaScript que o Google usa com seu navegador Chrome. ● Poucas pessoas pensam sobre o que de fato ocorre com o JavaScript no cliente. ● Um mecanismo JavaScript, de fato, interpreta o código e o executa. Com o V8, o Google criou um interpretador ultrarrápido escrito em C++ que tem um aspecto exclusivo: é possível fazer o download do mecanismo e integrá-lo em qualquer aplicativo que você desejar. ● Ele não é restrito à execução em um navegador. Portanto, o Node, na verdade, usa o mecanismo V8 JavaScript escrito pelo Google e o redireciona para uso no servidor. Perfeito! Por que criar uma nova linguagem quando há uma boa solução já disponível.
  • 17. 17 / 19 ReactJS ● React é uma biblioteca para criar interfaces. ● Isso é ótimo, ele vai resolver toda aquele amontoado de código com jQuery que tínhamos para manipular o DOM. Agora podemos criar coisas performáticas e reutilizáveis de verdade. ● Ele vai bem em várias situações e tipos de projetos, independente do tamanho.
  • 18. 18 / 19 ReactJS ● Essa biblioteca surgiu em 2011, no Facebook, e passou a ser utilizada na interface do mural de notícias da rede social. ● No ano seguinte, passou a integrar também a área de tecnologia do Instagram e de várias outras ferramentas da empresa. Em 2013, o código foi aberto para a comunidade, o que colaborou para sua grande popularização.
  • 19. 19 / 19 Trabalho Pesquisa ● Trabalho escrito e apresentado sobre: – Jquery, Angular JS, Node.js, ReactJS, BACKBONE.JS, D3.JS, EMBER.JS, Vue.Js ● Trabalho deve conter conceitos sobre o framework/biblioteca e exemplos de utilização.