TCC PROJETOS 2 - ALEXANDRE CECHINEL

77 Pages·2017·1.88 MB·Portuguese

UNIVERSIDADE FEDERAL DE SANTA CATARINA
DEPARTAMENTO DE INFORMÁTICA E ESTATÍSTICA
CURSO DE SISTEMAS DE INFORMAÇÃO
Avaliação do framework Angular e das bibliotecas React e Knockout para o
desenvolvimento do Frontend de aplicações Web.
Alexandre Cechinel
Florianópolis – Santa Catarina
2017/2
1
UNIVERSIDADE FEDERAL DE SANTA CATARINA
DEPARTAMENTO DE INFORMÁTICA E ESTATÍSTICA
CURSO DE SISTEMAS DE INFORMAÇÃO
Avaliação do framework Angular e das bibliotecas React e Knockout para o
desenvolvimento do Frontend de aplicações Web.
Alexandre Cechinel
Trabalho de conclusão de curso
apresentado como parte dos requisitos para
obtenção do grau de Bacharel em Sistemas
de Informação.
Florianópolis – Santa Catarina
2017/2
2
Alexandre Cechinel
Avaliação do framework Angular e das bibliotecas React e Knockout para o
desenvolvimento do Frontend de aplicações Web.

Trabalho de conclusão de curso apresentado como parte dos requisitos para
obtenção do grau de Bacharel em Sistemas de Informação
Banca examinadora:
_____________________________________________
Prof. Dr. Frank Augusto Siqueira
Orientador
______________________________________________
Prof. Dr. Leandro José Komosinski
______________________________________________
Prof. Dr. Maurício Floriano Galimberti
3
À todos que direta ou indiretamente
fizeram parte da minha formação,
o meu muito obrigado.
4
Resumo
Originalmente pensados para auxiliar no desenvolvimento Web, frameworks
JavaScript se tornaram muito populares entre desenvolvedores para construções de
aplicações Web na medida em que as páginas Web cresceram e se tornaram
aplicações completas ao lado do cliente. No entanto, o número de frameworks
JavaScript aumentou rapidamente, o que torna difícil para os profissionais identificar
o framework que mais se adequa às suas necessidades e desenvolver novas
estruturas que atendam essas necessidades.
O presente trabalho se concentrou em avaliar um framework e duas
bibliotecas JavaScript, e também compará-las com JavaScript puro, bem como,
identificar as razões que impulsionam os desenvolvedores para a escolha de uma
ferramenta Frontend. Assim, este estudo, se aprofundou em características
importantes para o conhecimento dos programadores, como por exemplo, as
diferenças arquiteturais, diferenças de custo, eficiência e implementação, além do
desempenho e de identificar o melhor cenário de desenvolvimento em que se
encaixam.
Entre os testes apresentados, há diferenças significativas nos resultados
encontrados, visto que para uma mesma aplicação obteve-se resultados diferentes
entre o framework e as bibliotecas testadas. Foi identificado como a manipulação do
DOM influencia no desempenho final da mesma aplicação. A biblioteca React por
fazer uso do Virtual DOM teve um desempenho melhor em relação ao AngularJS e
Knockout.
Palavras-chave: Web, JavaScript, HTML, CSS, Framework, Biblioteca, Single page
applications, Frontend, Angular, React, Knockout.
5
Abstract
Originally thought to aid Web development, JavaScript frameworks have
become very popular among developers for Web application builds as Web pages
have grown to become fully client-side applications. However, the number of
JavaScript frameworks has increased rapidly, making it difficult for professionals to
identify the framework that best fits their needs and to develop new frameworks that
address those needs.
The present work focused on evaluating a framework and two JavaScript
libraries, as well as comparing them with pure JavaScript, as well as identifying the
reasons that motivate developers to choose a Frontend tool. Thus, this study has
deepened in features important to programmers' knowledge, such as architectural
differences, cost differences, efficiency and implementation, as well as performance
and to identify the best development scenario in which they fit.
Among the tests presented, there are significant differences in the results
found, since for the same application different results were obtained between the
framework and the tested libraries. It was identified how DOM manipulation
influences the final performance of the same application. The React library for
making use of Virtual DOM performed better than AngularJS and Knockout.
Keywords: Web, JavaScript, HTML, CSS, Framework, Library, Single page
applications, Frontend, Angular, React, Knockout.
6
Lista de figuras
Figura 1: Diferenças entre desenvolvimento web básico e complexo 10
Figura 2: Métodos de requisição do HTTP 15
Figura 3: Primeiros dígitos do código de status HTTP 15
Figura 4: Árvore de objetos DOM do HTML 19
Figura 5: Modelo MVC 22
Figura 6: Modelo MVP 24
Figura 7: Modelo MVVP 25
Figura 8: Exemplo HTML 28
Figura 9: Exemplo JQuery 28
Figura 10: Exemplo HTML com Angular 29
Figura 11: Exemplo formulário com JQuery 29
Figura 12: Exemplo JavaScript com JQuery 29
Figura 13: Exemplo formulário com Angular 30
Figura 14: Exemplo JavaScript com Angular 30
Figura 15: Abas com JavaScript 31
Figura 16: Abas com Angular 32
Figura 17: Arquitetura Flux 35
Figura 18: Diagrama do fluxo de dados da arquitetura Flux 37
Figura 19: Arquitetura Knockout 38
Figura 20: Código de construção do array de objetos 42
Figura 21: Inicializando uma aplicação do Angular com a diretiva ng-app 43
Figura 22: Informa que o escopo do controlador começa a partir da tag <body> 43
Figura 23: Declaração do módulo app e controlador da página 44
Figura 24: HTML para a renderização dos objetos com Angular 45
Figura 25: Componente React 46
Figura 26: HTML para renderização dos objetos com React 47
Figura 27: Modelo da aplicação com Knockout 48
Figura 28: HTML com Knockout 48
Figura 29: Capturar a referência de um id 49
Figura 30: Adicionar evento em um id 49
Figura 31: Aplicação com JavaScript puro 50
7
Figura 32: HTML com JavaScript puro 50
Lista de Tabelas
Tabela 1: Cálculo desvio padrão e média 54
Tabela 2: Tamanho e quantidade de código necessário 56
Tabela 3: Comparação de características 57
Lista de Gráficos
Gráfico 1: Browser Chrome 54
Gráfico 2: Browser Firefox 55
Gráfico 3: Browser Safari 55
8
Lista de Abreviações e Siglas
WWW – World Wide Web
HTML – HyperText Markup Language
CSS – Cascading Style Sheets
DOM – Document Object Model
JSON – Javascript Object Notation
CERN – Organização Europeia para a Pesquisa Nuclear
AJAX – Javascript e XML Assíncrono
XML – eXtensible Markup Language
UI - User Interface
KO - Knockout
9
SUMÁRIO
RESUMO 2
LISTA DE FIGURAS 3
LISTA DE GRÁFICOS 4
LISTA DE TABELAS 4
LISTA DE ABREVIAÇÕES E SIGLAS 5
SUMÁRIO 6
1. INTRODUÇÃO 7
1.1 Problema 7
1.2 Objetivo 9
1.3 Justificativa 9
1.4 Metodologia de trabalho 10
1.5 Organização do texto 11
2. CONCEITOS FUNDAMENTAIS 13
2.1 Origem da Web 13
2.2 Modelo Cliente-Servidor 13
2.3 HTTP 14
2.3.1 Fase requisição 14
2.3.2 Fase resposta 14
2.4 Web 2.0 15
2.5 JavaScript 17
2.6 DOM 18
2.7 HTML 19
2.8 CSS 20
2.9 Padrões de design JavaScript MV* 20
2.9.1 Model-View-Controller (MVC) 21
2.9.2 Model-View-Presenter (MVP) 22
2.9.3 Model-View-ViewModel (MVVM) 24
10