Estudo de técnicas e de tecnologias para o desenvolvimento de Frontend de aplicações web

• Author(s): Silva, Aléxis José Rodrigues da
• Date: 2017
• Persistent ID: http://hdl.handle.net/10348/8722
• Origin: Repositório da UTAD
• Subject(s): desenvolvimento web; frameworks; frontend; HTML; CSS; Javascript
• Document Type: Master thesis
• Language: Portuguese

Description

O desenvolvimento da tecnologia em geral e da eletrónica de consumo em particular, tem consolidado, no mercado, a presença de vários tipos de equipamentos destinados ao processamento de informação – tais como estações fixas de trabalho e dispositivos móveis – com caraterísticas distintas, nomeadamente no nível dos tamanhos e resoluções de ecrã. A conectividade à internet típica destes dispositivos, a par da disseminação da rede de comunicações e da oferta de serviços relacionados têm contribuído fortemente para o crescente aumento do consumo de conteúdos web. Tanto a diversidade de dispositivos como a conectividade dos mesmos aos recursos online, assim como a variedade de navegadores – browsers para a web – disponíveis têm vindo a trazer grandes desafios no que diz respeito à visualização dos conteúdos web, uma vez que a otimização da experiência de utilização é feita, em grande medida, pela adaptação desses conteúdos não só aos diferentes tamanhos e resoluções que caracterizam a componente de visualização de cada dispositivo, mas também às especificidades do navegador em utilização. Nesse sentido, as frameworks de frontend têm tido um papel preponderante para profissionais a atuar no desenvolvimento do layout e da interatividade das páginas web, uma vez que possibilitam a apresentação do conteúdo considerando o contexto do dispositivo onde esta informação é apresentada. Nesta área de atuação, esta abordagem de implementação que é vulgarmente conhecida como design responsivo, visa dar resposta aos desafios supramencionados, permitindo o carregamento adaptado do conteúdo web em tempo real, considerando tamanhos/resoluções de ecrã e o próprio navegador web. Relativamente às frameworks de frontend disponíveis, de uma forma geral, elas são já em número considerável, quer para desenvolvimento em HTML/CSS, quer para o desenvolvimento em Javascript. Tendo em conta este facto, para esta dissertação foi feito o levantamento de um conjunto de frameworks atuais para o desenvolvimento de frontend, para as quais foi, ainda, realizada uma análise das principais caraterísticas. Desse conjunto, 2 frameworks HTML/CSS – o Bootstrap e o Foundation – foram comparadas entre si, assim como 2 outras frameworks Javascript – o Angular e o Ember –, através da implementação de um projeto web no âmbito do Laboratório de Tecnologia Aplicada ao Sector Agroflorestal, que consiste na gestão de recursos de investigação – material, artigos relacionados, publicações da equipa, etc. –, transversal às 4 frameworks. Parâmetros como a facilidade de aprendizagem, tempo de implementação, performance no carregamento, entre outros, permitem concluir que as frameworks de frontend selecionadas são boas escolhas para o programador no desenvolvimento de sítios web responsivos e interativos, apesar de a escolha recair sempre na forma como o programador se adapta e simpatiza com determinada framework, que também irá depender do tipo de projeto a ser desenvolvido.

Technology development in general and consumer-grade electronics in particular, has been consolidating several devices - such as fixed workstations and mobile devices - intended for information processing with different characteristics, particularly regarding screen sizes and resolutions. Internet availability for such devices and related services has greatly contributed for the increasing of web-based digital contents consumption. Both the available devices diversity and their connectivity to online resources, as well as the variety of web browsers have been leading to great challenges related with the visualization of digital web contents, since the optimization of the user experience is achieved, to a large extent, by these contents adaptation not only to the different sizes and resolutions that characterize each device visualization component, but also to the web browser specificities. In this sense, frontend frameworks have a crucial role for web developers concerned with layout and interactivity implementation, since they consider the context of the device wherein the information will be displayed. In this area, such implementation approach is commonly known as responsive design and aims to provide a proper answer to the aforementioned challenges, allowing the optimized web content loading in realtime, considering screen sizes/resolutions and also the web browser itself. Regarding the available frontend frameworks, there are already a considerable amount of them for development in either HTML/CSS or Javascript. In this dissertation a survey on modern frontend frameworks was made, including the analysis of their main characteristic. From that set, 2 HTML/CSS frameworks – the Bootstrap and the Foundation – were compared to each other, as well as 2 other Javascript frameworks – the Angular and Ember – through the implementation of a web project consisting of research resources management (tools, materials, integrated members, etc.) for a laboratory of technology applied to the agroforestry sector. Requirements were consistently maintained for those 4 frameworks. Parameters such as ease of learning, implementation time, loading performance and others, allowed to conclude that the selected frontend frameworks are good choices for the development of responsive and interactive websites. However, the selection will always depend on the programmer’s adaptation/empathy relatively to a particular framework and also on the type of project to be developed.