Master in Informatics and Computing Engineering
Arquitetura Orientada a Componentes para uma Web Responsiva
Rui Tiago Bugalho Monteiro
—

Software development for the WorldWideWeb has evolved with the growth of its ecosystem of devices. If, in its early days, the Web was mostly the place where people could get access to some simple websites, via desktop computers, with stable Internet connections, today,Web Applications can be created for a countless number of purposes and may be run not only by desktop computers, but also by smartphones, tablets, Smart TVs, etc. and accessed via wireless networks, which are so often unstable, or even in situations when it’s not possible at all to get an Internet connection. Therefore, it’s imperative that we find new ways to develop the Web Applications of today, so they can respond to the needs of all these new usage paradigms and allow developers to focus on creating software able to provide their users with good user experiences and to forget about the high complexity that comes with the development of software with such a broad spectrum of target devices.

The concepts Web Components, Offline-first, Responsive Web Design and Single-Page Applications propose new ideas which are mean to fight the high complexity of developing the Web Applications of today and vow to be the future authors of the next Web software development books. In this work, it is proposed a front-end architecture for Web development based on these four concepts, composed by a selection of technologies which already implement the ideas of these concepts. Furthermore, the technologies chosen to be part of the proposed architecture, as well as the reasons for choosing each one of them, and some of its most relevant implementation details are described.

To validate the proposed front-end architecture, a Web application was developed as proof of concept—Nomnow. The source code of the developed application was highly separated by components and it was intuitive and easy to maintain. Also, the application itself featured a responsive user interface and could be used even with no Internet connection.

Finally, it was concluded that the technologies chosen to be part of the proposed architecture, and, therefore, the four concepts implemented by those technologies, offer significant benefits in terms of simplifying the development process of software for the Web platform.

O desenvolvimento de software para a World Wide Web tem evoluído em função do crescimento do seu ecossistema de dispositivos. Se, nos seus primeiros anos, a Web era maioritariamente composta por páginas navegáveis informativas, que apenas podiam ser visualizadas em computadores pessoais, com ligações à Internet estáveis, hoje, uma aplicação Web pode ser usada para um número indeterminado de fins e pode ser corrida, tanto em computadores pessoais, como em smartphones, ou em tablets, Smart TVs, etc. e através de redes sem fios pouco estáveis ou até mesmo em locais em que não é possível conseguir-se, de todo, uma ligação à Internet. Por esta razão, é preciso criar novas formas para se desenvolverem as Aplicações Web dos dias de hoje, que permitam responder às necessidades criadas por todos estes novos paradigmas de utilização e que permitam aos programadores concentrarem-se na criação de aplicações capazes de oferecer boas experiências de utilização aos seus utilizadores e esquecerem a elevada complexidade inerente à implementação de aplicações com um espetro de dispositivos-alvo tão amplo.

Os conceitos Web Components, Offline-first, Responsive Web Design e Single-Page Applications introduzem ideias que dão resposta à elevada complexidade do desenvolvimento das Aplicações Web atuais e prometem ser eles os autores dos próximos livros de desenvolvimento de aplicações para a Web. Nesta dissertação é proposta uma arquitetura front-end para o desenvolvimento de Aplicações Web baseada nestes quatro conceitos, que será composta por uma seleção de tecnologias que já os implementam. São enumeradas as tecnologias que foram escolhidas para integrar essa arquitetura, explicadas as razões que justificaram cada escolha e descritos alguns dos detalhes de implementação mais importantes da arquitetura proposta.

Para validar a arquitetura front-end proposta foi desenvolvida, como prova de conceito, uma aplicação Web — Nomnow. A aplicação desenvolvida apresentou um código-fonte separado por componentes, intuitivo e de fácil manutenção, e uma experiência de utilização rica, com uma interface do utilizador responsiva e mantendo-se funcional mesmo sem uma ligação à Internet.

Confirmou-se, por fim, que as tecnologias selecionadas para integrar a arquitetura proposta por esta dissertação, e, por sua vez, os quatro conceitos explorados por essas tecnologias, oferecem efetivamente vantagens significativas na simplificação do processo de desenvolvimento de software para a Web.

• Chair: Maria Cristina Ribeiro
• External Examiner: Maria Benedita Malheiro
• Supervisor: João Correia Lopes
• Date: 16/07/2015