Conceito para o desenvolvimento web utilizando Spring Boot,

Bootstrap e Angular JS.

Nathan da Silva de Bortoli1 , Ricardo Ribeiro Rufino1
1
Universidade Paranaense (Unipar)
Paranavaı́ – PR – Brasil
nathanbortoli@gmail.com, ricardo@unipar.br

Resumo. Para o desenvolvimento de uma aplicação web, é importante utilizar

frameworks para a qualidade, desempenho e segurança de um software. Este
artigo tem como objetivo descrever três frameworks, o Spring Boot, AngularJS
e o Bootstrap. A pesquisa foi fundamentada através de revisões bibliográficas,
com a finalidade de explicar os objetivos, funcionalidades e vantagens que as
frameworks tem para se desenvolver um produto computacional com qualidade.
Por meio dessas frameworks, foi possı́vel implementá-las em uma aplicação
web.

1. Introdução
Um framework de desenvolvimento é uma “base” que se pode desenvolver algo maior ou
mais especıfico. É uma coleção de códigos fonte, classes, funções, técnicas e metodolo-
gias que facilitam o desenvolvimento de novos softwares [Minetto 2007].
O uso de frameworks no desenvolvimento de aplicações é cada vez maior, atual-
mente, é muito difı́cil encontrar alguma aplicação em que não se utiliza alguma. Usar
frameworks é garantir que o projeto seja entregue no tempo determinado, que o desenvol-
vimento seja mais rápido, além disso, reduz custos, aprimora a qualidade, manutenção e
segurança.
Assim, este artigo apresenta um estudo sobre três frameworks para o desenvolvi-
mento de aplicações web: Spring Boot, é uma framework em java direcionada ao back-
end, AngularJS, que é um framework em Javascript, tem a capacidade de executar toda a
parte do servidor para o lado do cliente, e Bootstrap, que é um framework composto em
JavaScript, html e css, focando na interface de uma aplicação.

2. Metodologia
Para este artigo, foram realizadas consultas bibliograficas em livros, artigos e sites, com
a finalidade de fazer uma analise das tecnologias pesquisadas em que foi possı́vel a
implementação dessas tecnologias em um produto computacional.

3. Desenvolvimento
3.1. Spring Boot
O Spring Boot é uma framework que simplifica a maneira de se desenvolver uma
aplicação, porque torna mais facil de criar stand-alone, onde basta executar a aplicação.
Com Spring Boot não é necessário utilizar um servidor web pois ele utiliza um servidor
embutido, que torna a aplicação inteira executável [Gutierrez 2016].
 Criado a partir do Spring MVC, o Spring Boot, foi criado para agilizar os pro-
cessos de desenvolvimentos de software e reduzir custos de desenvolvimentos. Mas seu
objetivo principal, é fazer com que as aplicações web não precise necessariamente de um
servidor web para sua execução.
Os objetivos do Spring Boot é criar aplicações completas sem precisar se preocu-
par muito com configuração e criação de uma nova aplicação, focando apenas no desen-
volvimento de aplicações melhores e aprimora as regras de negócios. Com isso, propor-
ciona uma experiencia ao desenvolvedor radicalmente mais rápida, diverge os padrões,
em que é fornecido uma gama de caracterı́sticas não-funcionais como servidores embu-
tidos, além de trazer segurança, métricas e configurações exteriorizadas, e mais, não é
necessário nenhuma geração de código e sem nenhuma exigência de configurar um ar-
quivo XML [Webb et al. 2013].
O Spring Boot, foi desenvolvido para melhorar e agilizar processos de desenvol-
vimento de aplicações web, por não precisar necessariamente de um servidor web, essa
tecnologia proporciona que o desenvolvedor não precise perder tempo configurando na
hora de criar uma nova aplicação. Outra vantagem do Spring Boot é a performance que
ele agrega no desenvolvimento e na aplicação, deixando os software mais rápido e funci-
onal.
Outra funcionalidade do Spring Boot, é permitir exteriorizar sua configuração
para que seja possivel trabalhar com uma mesma aplicação em ambientes diferentes de
códigos. Para isso é necessario utilizar arquivos de propriedades, arquivos YAML, va-
riaves de ambiente, argumentos de linha de comando para configurar a exteriorização
[Webb et al. 2013].
Essa funcionalidade que o Spring Boot proporciona, faz com o que seja viável que
a aplicação possa ser migrada para outras tecnologias.
Também é necessario utilizar um servidor web utilizando o Spring Boot para o de-
senvolvimento de aplicações web, para isso é fundamental fazer umas adaptações, como
criar um HTTP auto-suficiente e utilizar um servidor incorporado, como o TomCat, Jetty
ou Undertow. A maioria das aplicações web irão utilizar o Spring-Bootstart-Web, modulo
para levantar e executar a aplicação rapidamente [Webb et al. 2013].

3.2. Boostrap
Bootstrap é o mais popular framework JavaScript, HTML e CSS para desenvolvimento
de sites e aplicações web responsivas e alinhadas com a filosofia mobile first. Torna
o desenvolvimento front-end muito mais rápido e fácil. Indicado para desenvolvedores
de todos os nıveis de conhecimento, dispositivos de todos os tipos e projetos de todos os
tamanhos. O site do Bootstrap o define como um poderoso, elegante e intuitivo framework
front-end que possibilita um desenvolvimento web de modo ágil e fácil [Silva 2015].
O Bootstrap, foi criado parar agilizar o desenvolvimento front-end. Proporcio-
nando agilidade e qualidade no desenvolvimento de interfaces. Essa framework, oferece
componentes de interfaces pronto, onde o desenvolvidor não precisara ficar perdendo
tempo na criação de compornentes de interfaces, fazendo que o tempo de desenvolvi-
mento da aplicação seja otimizada.
O Bootstrap nada mais é do que CSS criado com LESS, um pré-processador des-
tinado a gerar folhas de estilos CSS capaz de oferecer muito mais flexibilidade e poder
as folhas de estilos convencionais, ou não processadas. Posteriormente foram criadas
funcionalidades que permitem usar não somente LESS, mas também SASS como pré-
processador CSS para o Bootstrap. LESS e SASS são capazes de oferecer uma vasta
gama de funcionalidades, tais como declarações CSS aninhadas, variáveis para valores de
propriedades CSS, mixins (espécie de classe capaz de ser reusada), operadores e funções
para declaração de cores [Silva 2015].
A figura 1, ilustra a estrutura de como o framework Bootstrap é composto.

Figura 1. Arquitetura do Bootstrap (Fonte: Silva, 2015).

Na figura acima, é representado como o Bootstrap é estruturado. O arquivo inclui

tres pastas: CSS, JS e IMG. Para utilizar o framework Bootstrap, é só adicionar o arquivo
a raiz do projeto.
Bootstrap utiliza consultas de mıdia CSS para medir a largura da janela do navega-
dor e, em seguida, são feitas as alterações que partes das folhas de estilo, usa a largura da
janela do navegador. O Bootstrap pode otimizar o conteúdo usando uma combinação de
rácios ou larguras, mas na maior parte depende das propriedades min-width e max-width.
No núcleo, Bootstrap suporta cinco layouts diferentes, cada um contando com consultas
de mıdia CSS. O maior layout tem colunas que são 70 pixels de largura, contrastando com
os 60 pixels de o layout normal [Spurloke 2013].

3.3. AngularJS
O AngularJS é uma framework JavaScript MVC para web, e tem o objetivo de trazer
grande parte das ferramentas e capacidades que são codificadas no lado servidor para o
lado cliente. Com isso, pretende-se facilitar o desenvolvimento, testes e a manutenção dos
sistemas. O Angular permite também a extensão do HTML expressando as funcionalida-
des através de elementos personalizados, atributos, classes e comentários [Feeman 2014].
Essa framework oferece componentes prontos em JavaScript facilitando e otimi-
zando o tempo na hora de desenvolver uma aplicação. Criada pela Google, o AngularJS
foi deselvolvido no intuito de agilizar o processo de desenvolvimento de software, redu-
zindo as linhas de códigos desenvolvidas do projeto, tornando o desenvolvimento mais
produtivo e ágil.
O principal conceito por trás do framework AngularJS é o padrão de arquitetura
MVC. O padrão MVC (Model-View-Controller) evoluiu como uma maneira de separar
unidades lógicas e responsabilidades no desenvolvimento de aplicações de grande porte.
Ele oferece aos desenvolvedores um ponto de partida parar decidir como e em que ponto
as responsabilidades serão divididas [Seshadri and Green 2014].
A figura 2, ilustra a arquitetura do framework AngularJS utilizando o seu principal
conceito por trás de toda estrutura, a arquitetura MVC.

Figura 2. Arquitetura MVC (Fonte: STROPEK, 2013).

Essa arquitetura separa a aplicação em três 3 partes, o model que são os dados por
trás da aplicação, são os dados que são acessados pelo servidor; a view, é parte que faz a
interação com o usuário, interface; e o controller, que é a parte em que faz a ligação direta
entre o model e a view, é a onde fica toda a parte lógica de negócios, é onde os dados
podem ser acessados da view.
O AngularJS permite aplicar praticas-padrao de engenharia de software testadas e
aprovadas, tradicionalmente utilizadas do lado do servidor, na programação do lado cli-
ente para acelerar o desenvolvimento de frontends [Seshadri and Green 2014]. Esse novo
método de desenvolvimento possibilitou que aplicaçoes web de pequeno e grande porte
fosse desenvolvidas de modo que exigisse menos linhas de códigos, com isso um au-
mento de produtividade e o resultado final trazendo uma grande melhora na performance
da aplicação.
4. Conclusão
Este trabalho propôs um estudo sobre essas três frameworks: Spring Boot, Bootstrap e
AngularJS, para o desenvolvimento de aplicações web. Essas tecnologias foram imple-
mentadas em um produto computacional. Com a utilização dessas framewoks foi possı́vel
criar uma aplicação web com qualidade e uma alta performance. Já que a utilização do
Spring Boot em uma aplicação web, permite que a aplicação não precise necessariamente
de um servidor web para a sua execução, e também, para criar aplicações completas sem
precisar perder muito tempo configurando a framework. Já a utilização do Bootsrap, per-
mite que o desenvolvimento front-end seja mais rápido e fácil, por possuir componentes
prontos de formatações, sem contar que, o framework possui todos componentes respon-
sivo. E por fim, o AngularJS, que fornece funcionalidades para criar aplicações web,
rápidas e intuitivas.
A otimização, performance e leveza dessas tecnologias, permite criar aplicações
web, geralmente simples ou complexas. Para os desenvolvedores, o uso dessas fra-
meworks, tem vantagens relevantes, ao passo que possibilita a reutilização de códigos,
aprimoram o projeto em menos tempo, diminuim os custos, além da facilidade na
programação em deixar uma arquitetura mais organizada. A utilização dessas fra-
meworks possui muitos pontos positivos, e a escolha delas para o desenvolvimento de
uma aplicação web, trará resultados satisfatórios, entretanto são tecnologias que estão
em processo de evolução, e tende a evoluir e melhorar muito no desenvolvimentos de
aplicações web para fornecer aos usuários finais uma aplicação de qualidade.

Referências
Feeman, A. (2014). Pro AngularJS. Apress, New Mexico USA.
Gutierrez, F. (2016). Pro Spring Boot. Apress, New Mexico USA.
Minetto, E. (2007). Frameworks para Desenvolvimento em PHP. Novatec Editora, São
Paulo, SP.
Seshadri, S. and Green, B. (2014). Desenvolvendo com AngularJS. Novatec Editora, São
Paulo, SP.
Silva, M. S. (2015). Bootstrap 3.3.5. Novatec Editora, São Paulo, SP.
Spurloke, J. (2013). Bootstrap. O’Reilly, California, EUA.
STROPEK, R. (2013). Angularjs with typescript and windows azure mobile servi-
ces. http://www.software-architects.com/devblog/2013/10/17/
AngularJS-with-TypeScript-and-Windows-Azure-Mobile-Services,
note = Accessed: 30-07-2016 as 20:50:05.
Webb, P., Syer, D., Long, J., Nicoll, S., Winch, R., Wilkinson, A., Over-
dijk, M., Dupuis, C., and Deleuze, S. (2013). Spring boot reference guide.
http://docs.spring.io/spring-boot/docs/current/reference/
pdf/spring-boot-reference.pdf. Accessed: 30-07-2016 as 22:03:35.