Desenvolvedor Full Stack e seu futuro

  R. Domingos Sérgio dos Anjos, 277 - Jardim Santo Elias, São Paulo - SP, 05136-170 *autor correspondente: nome@email. com Desenvolvedor Full Stack e seu futuro Resumo Esta monografia foi realizada como um projeto de pesquisa sobre o tema desenvolvedor Full Stack. Os principais objetivos deste trabalho estão em estudar as diferentes ferramentas de um desenvolvedor qua utiliza a pilha MEAN, utilizando a mais popular estrutura JavaScript Full Stack, demonstrando a escolha da trilha através de um protótipo de aplicativo web. A área de T. I (Information Technology) area has a great influence in the consolidation of information, being this sector, a set of activities and solutions provided by computing resources that aim at production, storage, transmission, access and security and the use of information. It is extremely important and essential for any organization, since it is in the IT sector that the organization's information resource data, all users, infrastructure and all information systems are contained in it.

The primary responsible for manipulating, providing, stepping, ensuring that information arrives consistently, safely, and reliably to top management is the system developer. In this context, topics will be addressed on the emergence of T. I, approaches within companies that work with IT projects and how the developer Full Stack plays an important role.  Em 1843, ela publicou uma sequência de etapas para realizar usando uma máquina de computação projetada por seu amigo Charles Babbage, professor de matemática de Cambridge, que havia inventado o Difference Engine, um computador mecânico projetado para produzir tabelas matemáticas de forma automática e livre de erros (ROUTLEDGE, 2002). Babbage nunca construiu a máquina real devido a contratempos pessoais e dificuldades de financiamento.  Em 1834, ele passou a projetar seu Mecanismo Analítico, o primeiro computador de uso geral, que usava cartões perfurados para entrada e saída.

 Essa máquina também precisava de financiamento e nunca foi construída.  O mecanismo de diferença de Babbage só foi construído em 1985-2002 e funcionou (ROUTLEDGE, 2002). Para contextualizar o tema será desenvolvido um protótipo apenas para ilustrar a implementação de um programador “Full Stack”, de modo que o estudo se concentre mais sobre a aplicação e prática dos componentes e características usados por esse tipo de programador na aplicação, do que a própria aplicação. Além disso, este estudo abordará os pontos fortes e fracos da pilha de desenvolvimento, sugerindo o contexto onde usá-lo e em que para evitá-lo. Contexto e Relevância da Pesquisa A ciência da computação é o estudo dos fundamentos teóricos da informação e da computação e sua implementação e aplicação em sistemas computacionais, com as fundações matemáticas, algoritmos e estruturas de dados, inteligência artificial, comunicação e segurança, arquitetura de computadores, computação gráfica, sistemas concorrentes, paralelos e distribuídos, bancos de dados, linguagem de programação e compiladores, computação científica, engenharia de software e teoria da computação como sub-áreas (ROUTLEDGE 2002).

Nos anos 80, a inovação não era necessária para o sucesso do negócio.  Uma empresa poderia fazer bem apenas implantando um modelo de negócios comprovado. ROUTLEDGE, 2002). Embora as inovações em viagens e multimídia tenham melhorado a inteligência coletiva, essas eram principalmente formas passivas de aprendizado.  Os aplicativos de computador e a junção da inteligência global ativaram o aprendizado ativo e melhoraram a rapidez com que as pessoas aprendem coisas novas (WAZLAWICK, 2016). A área de Ti se tornou mais que apenas uma área, mas sim parte fundamental do negócio da empresa (PASQUALI, 2013; DYL, 2017). Os profissionais dessa área tiveram que se adequar ao mercado, pois cada vez mais o mercado está mais rígido e buscando os profissionais com mais habilidades e conhecimento.

• A computação em nuvem é mais eficiente que uma rede de computadores privada. Conforme Duckett 2016, as empresas que adotaram o paradigma da inovação tendem a ter as seguintes características: • Planejamento de negócios mais preciso • Marketing mais efetivo • Vendas em âmbito global • Gerenciamento mais sistemático • Monitoramento em tempo real • Suporte instantâneo ao cliente De acordo com Wazlawick 2016, a revolução tecnológica melhorou as empresas neste século nas cinco formas principais a seguir: 1. A tecnologia da informação deu aos negócios as ferramentas para resolver problemas complexos: hardware aprimorado (mais memória, processadores mais rápidos, visuais mais nítidos, etc) combinados com aplicativos mais inteligentes (software Mindmapping como o X Mind, software colaborativo como painéis Kanban, organizadores como o Google Calendar, etc) facilitaram a pesquisa de dados, análise, e planejar a escalabilidade.

 Muitas ferramentas disponíveis para resolver problemas complexos. A tecnologia da informação permite que as empresas tomem decisões melhores: boas decisões nos negócios são baseadas em pesquisas de mercado sólidas.  Isso inclui vários analistas, desenvolvedores e administradores que criam e gerenciam sistemas (WAZLAWICK 2016). Engenheiros de software, programadores e profissionais de TI trabalham juntos sob o rol da tecnologia da informação, embora seus papéis e responsabilidades sejam bastante distintos, essas três profissões são essenciais no desenvolvimento de aplicativos de software, não sendo possível colocar uma sobre as outras (WAZLAWICK, 2016). Um engenheiro de software é alguém que estudou os princípios e as técnicas da ciência do computador, a análise matemática que o acompanha e a engenharia de todas essas áreas.

 Em engenharia, antes de qualquer outro conceito, o primeiro e o mais crítico é o “design”. Assim, um engenheiro de software é alguém que aprendeu e compreendeu os princípios da engenharia de software e é capaz de aplicar o conhecimento ao design e desenvolvimento de software de computador.  Então, são os especialistas nesse segundo ramo da Tecnologia da Informação que são referidos como profissionais de TI. DUCKETT, 2016). Após os requisitos fornecidos pelo cliente serem analisados ​​e compreendidos, diferentes fluxogramas e diagramas são desenvolvidos para o processo de desenvolvimento de software. A função de trabalho de um programador está em converter as instruções que foram analisadas em linguagem de computador através do conhecimento de codificação ou programação de computadores (DUCKETT, 2016). Um programador de computador recebe instruções de um superior baseado no software para desenvolver e gravar códigos para o software.

 E embora o papel tenha seu lugar, o próprio termo precisa de uma atualização séria (ALMEIDA, 2015). A definição de um desenvolvedor Full Stack em si é subjetiva.  Para generalizar, um desenvolvedor Full Stack é alguém que trabalha tanto no lado de apresentação do software quanto no lado computacional.  No desenvolvimento web, um desenvolvedor Full Stack geralmente trabalha com as preocupações front-end e backend de um site.  Nos anos 90 até meados de 2000, os desenvolvedores da web que codificavam regularmente PHP ou Python, jQuery, HTML, CSS e transferiam alguns arquivos via FTP para sua conta de hospedagem compartilhada ou servidor dedicado, eram sinônimos de desenvolvedores Full Stack.  Os sites eram limitados a computadores pessoais, não prestando atenção a diferentes tamanhos de tela.  O advento dos telefones e tablets exigiu repensar como as informações da web eram apresentadas e consumidas.

 Isso também adicionou uma nova preocupação ao frontend das coisas (DUCKETT, 2016). Pilha de aplicativos A terminologia evolui da maneira como é falado sobre o hardware do computador e como os programas tradicionais de desktop são executados.  Quando se pretende diagramar o modelo de execução tradicional do software, uma camada de hardware seria realizada na parte inferior, um sistema operacional que controla o acesso a esses recursos de hardware e, em seguida, executaria em cima de seu sistema operacional. A equipe do Back End pega esse protótipo funcional da equipe de front-end e o cria em um sistema que pode sobreviver a centenas ou milhares de solicitações por minuto, onde estão mergulhando um pouco mais na arquitetura do software real, enquanto a equipe de front end realmente construiu a arquitetura de como o usuário experimenta o aplicativo.

DUCKETT, 2016). Trabalhar por trás do back-end é Ops e Data.  A equipe de back-end produz um aplicativo escalonável, mas é preciso que a equipe Ops realmente faça o aplicativo ser executado no servidor, manter o código e reinicializar se o código falhar.  Se tiver usuários além do que projetou, começará a acumular muitos dados. Modelagem de dados Se o modelo de dados tiver falhas, a lógica de negócios e as camadas superiores começarão a precisar de código para compensar os casos de canto que o modelo de dados não cobre. Desenvolvedores Full Stacks sabem como criar um modelo relacional razoavelmente normalizado, completo com chaves estrangeiras, índices, visualizações, tabelas de consulta, etc, e; Estão familiarizados com o conceito de armazenamentos de dados não relacionais e entendem onde eles brilham em armazenamentos de dados relacionais.

Lógica de negócios O coração do valor do aplicativo. Habilidades orientadas a objetos sólidos são necessárias aqui; Estruturas podem ser necessárias aqui também. Camada de API / camada de ação / MVC Como o mundo externo opera contra a lógica de negócios e o modelo de dados; Estruturas neste nível devem ser usadas intensamente; Desenvolvedores Full Stack têm a capacidade de escrever interfaces claras, consistentes e simples de usar. De acordo com Dyl 2017, além das características demonstradas na tabela 2 acima, o desenvolvedor Full Stack deve possui as habilidades a seguir: 1. Capacidade de escrever testes unitários de qualidade.  By the way, até JavaScript pode ter testes de unidade nos dias de hoje. Compreensão de processos automatizados repetíveis para criar o aplicativo, testá-lo, documentá-lo e implantá-lo em escala.

Uma consciência das preocupações de segurança é importante, pois cada camada apresenta suas próprias vulnerabilidades possíveis. O desenvolvimento da web, no front-end, também conhecido como desenvolvimento do lado do cliente, envolve a prática de criar a Interface Gráfica com o Usuário (GUI) para clientes (usuários) para que os usuários possam interagir com o aplicativo. Envolve o uso de tecnologias e ferramentas da web primárias, como HTML, CSS e JavaScript. HTML é uma linguagem de marcação que fornece a estrutura para uma página da web que define como uma página da web seria, de modo que possa ser considerado o esqueleto de qualquer aplicativo da web. CSS, por outro lado, é uma linguagem de folha de estilo que fornece estilo e melhorias visuais aos documentos escritos em HTML.

JavaScript é a linguagem mais avançada entre essas tecnologias. Além disso, um aplicativo da web deve garantir a comunicação entre o cliente e o servidor com o uso de diferentes protocolos de comunicação. Os protocolos são um conjunto de regras para troca de mensagens em uma rede de comunicação. Os protocolos variam com diferentes tarefas e camadas. HTTP (Protocolo de Transferência de Hipertexto), TCP / IP (Protocolo de Controle de Transmissão / Protocolo da Internet), FTP (Protocolo de Transferência de Arquivos), SMTP (Simples Mail Transfer Protocol), SOAP (Simple Object Access Protocol) e REST (Representational State Transfer) são alguns exemplos comuns dos protocolos usados ​​em aplicações web (NOJINOV, 2015). Um aplicativo da web, em sua forma mais elementar, envia uma solicitação HTTP a um servidor para estabelecer conexão e o servidor envia uma resposta HTTP ao cliente (DUCKETT, 2016).

 Cuida de toda a estrutura e conteúdo.  O HTML5 é a iteração atual do HTML na web, embora sites criados com versões mais antigas ainda funcionem bem no seu navegador (DUCKETT, 2016). CSS (Cascading Style Sheets) é o que controla a aparência do HTML na página.  O CSS define as cores, fontes, imagens de plano de fundo e até mesmo o layout da página (é possível usar o CSS para organizar os elementos HTML em uma página como quiser, mesmo que seja diferente da ordem em que estão dispostos no HTML Arquivo).  O CSS3 é a iteração atual do CSS na web e adiciona uma tonelada de recursos para coisas como interatividade básica e animações (DUCKETT, 2016).  Outros sites, no entanto, têm mais código oculto no back-end do site, para aumentar ou melhorar o front-end do site (DUCKETT, 2016).

Construir um bom sistema de gerenciamento de banco de dados (DBMS) para armazenar informações é uma parte crucial do desenvolvimento de aplicativos da web. O DBMS permite que os usuários criem, salvem, atualizem e consultem dados (de pesquisa) em um aplicativo da web. Existem dois tipos de bancos de dados: relacional e não relacional. Bancos de dados relacionais, também conhecidos como bancos de dados SQL, são bancos de dados tradicionais que armazenam dados em tabelas na forma de linhas e colunas. O uso de estruturas da web no desenvolvimento de aplicativos da web sofisticados é mais prático do que o uso de linguagens de programação nativas. As estruturas da web, também conhecidas como estruturas de aplicativos da web, são projetadas para facilitar a tarefa de desenvolvimento de aplicativos da web, fornecendo bibliotecas de acesso ao banco de dados, modelos, gerenciamento de sessões e recurso de reutilização de código.

Estruturas JavaScript como AngularJS, ReactJS, Backbone. js, Ember. js e Knockout. Em vez disso, é possível encontrar vagas onde a procura está por desenvolvedores Ruby ou desenvolvedores PHP, etc. porque a linguagem de programação real que um desenvolvedor sabe que é a chave para ser o ajuste certo para um trabalho específico (DUCKETT, 2016). Quanto ao que se pode fazer com uma linguagem de back-end que não é possível fazer com JavaScript, a lista é muito mais limitada do que costumava ser.  Uma diferença fundamental: a maioria dos sistemas de gerenciamento de conteúdo é construída em uma linguagem de programação de back-end, assim como muitos aplicativos da Web grandes e complexos.  O JavaScript pode sofrer de problemas de desempenho (por exemplo, fica lento ou até bugs) em alguns casos, portanto, embora agora seja possível usar o JS para construir praticamente qualquer coisa possível na imaginação, às vezes ainda há soluções melhores por aí.

 Este foi um novo desafio para os desenvolvedores de front-end (DUCKETT, 2016). Depois de inúmeros avanços, o desenvolvimento de software é um mundo complexo de tecnologias interconectadas.  Está se tornando difícil visualizar front e back-end como entidades separadas, sendo desejável que um desenvolvedor obtenha um status de “Full Stack” (ou seja, de todos os negócios) - sendo habilidoso no trabalho de front e back-end para aumentar a competitividade e a relevância no mercado. Desenvolvedores Full Stack Desenvolvedores Full Stack trabalham com a frente e a extremidade traseira de um site ou aplicativo.  Eles estão familiarizados com HTML, CSS, JavaScript e um ou mais idiomas de back-end. Não é um conjunto de regras (protocolos) para criar serviços da web. Quaisquer serviços da Web ou APIs (Interfaces de Programação de Aplicativos) projetados com a arquitetura REST são chamados de APIs RESTful ou apenas APIs REST.

O REST oferece bom desempenho, escalabilidade e confiabilidade em um sistema de computação distribuída. Existem várias restrições para um aplicativo se tornar um aplicativo REST (BOJINOV, 2015). Conforme Bojinov 2015, no entanto, uma implementação concreta de APIs REST deve seguir pelo menos quatro princípios básicos de design: • Uso de métodos HTTP: as APIs REST devem seguir os métodos HTTP explicitamente. Figura 2: Exemplo REST API Fonte: BOJINOV, 2015 (Adaptado). A Figura 2 ilustra a comunicação entre um aplicativo do lado do cliente e uma API REST. O cliente não conhece a implementação do servidor e não se comunica diretamente com o servidor. A API REST pega todas as solicitações HTTP recebidas do cliente, as processa e envia respostas HTTP (BOJINOV, 2015). Aplicativo de página única O aplicativo de página única (SPA) é um aplicativo da web que se encaixa em uma única página da web.

Estruturas JavaScript de front-end modernas, como AngularJS, Ember. js, React e Meteor. js simplificaram as tarefas de criação de SPAs, fornecendo recursos avançados de manipulação de DOM e de ligação de dados de duas maneiras. Os SPAs fornecem uma interface rica e uma experiência de usuário fluida. Além disso, os SPAs fazem com que os usuários sintam que estão interagindo com um aplicativo de desktop. É frequentemente usado para validar a entrada do usuário em formulários e enviar os dados de forma assíncrona com o AJAX. Ele também executa a manipulação HTML DOM para fornecer interface dinâmica. É uma linguagem de programação orientada a objetos e suporta vários objetos internos com herança. Assim, o JavaScript permite que os desenvolvedores adicionem recursos dinâmicos a páginas HTML estáticas, controlem a multimídia e adicionem animações.

Além disso, o JavaScript fornece várias APIs e bibliotecas de terceiros para facilitar a tarefa de construir páginas web dinâmicas. Por exemplo, para alterar a cor de fundo do corpo em uma página HTML, escreve-se a seguinte função em JavaScript: Figura 5: Exemplo função em JavaScript Fonte: Próprio autor. Enquanto, a mesma tarefa pode ser executada em uma linha de código usando a seguinte função “JQuery: $('body'). CSS('background', '#ccc');”. O JQuery fornece funções mais simples para criar animações, lidar com diferentes eventos e desenvolver aplicativos AJAX. AJAX (Asynchronous JavaScript and XML) é uma técnica de desenvolvimento web para criar aplicações web assíncronas. Os desenvolvedores começaram a perceber que o uso de dois idiomas separados no desenvolvimento do cliente e o servidor estava complicando as tarefas de programação web.

Várias tentativas foram feitas para unificar os dois lados, criando componentes clientes no servidor e compilando-os em JavaScript (por exemplo: formulários da Web ASP. NET e GWT), mas falharam. A única solução para esse problema foi a implementação do JavaScript no lado do servidor e o Node. js foi introduzido. js para testes de aplicativos, Gulp. js e Grunt. js para automação de construir tarefas (PASQUALI, 2013). O ecossistema Node. js, com o acréscimo de AngularJS no front-end, o Express como estrutura de backend e o MongoDB como banco de dados, criou um novo termo no desenvolvimento de aplicativos da Web chamado MEAN (MongoDB, Express. MEAN Stack O Node. js é uma plataforma de software que ajuda a criar aplicativos de rede assíncronos e orientados a eventos.

Ele contém bibliotecas do servidor HTTP integradas que permitem que os desenvolvedores criem seu próprio servidor da Web e criem aplicativos da Web altamente escalonáveis ​​sobre ele. O mecanismo de tempo de execução do V8 JavaScript usado pelo Node. js é o mesmo mecanismo usado no navegador Google Chrome (PASQUALI, 2013). O mecanismo V8 fornece o ambiente de tempo de execução para o aplicativo, e o libeio manipula o conjunto de encadeamentos para fazer chamadas de E / S assíncronas (não-bloqueantes) para o libev, o loop de eventos(PASQUALI, 2013). O recurso de E / S assíncrona e sem bloqueio do Node. js desempenha um papel importante no gerenciamento de recursos e no aprimoramento de desempenho dos aplicativos Node. js. Ao contrário de outros servidores comuns, como Apache e IIS, o Node.

js usa uma abordagem de E / S orientada a eventos e sem bloqueio para manipular todas as solicitações para o servidor (PASQUALI, 2013; DYL, 2017). Figura 7: Event Node. js Fonte: EBR5 (2012) Na figura 7, o Node. js cria um loop de eventos com manipuladores de eventos para todas as solicitações. Quando ocorre uma operação de E / S, o manipulador associado é enfileirado para execução e uma função de retorno de chamada emite um evento após a conclusão da operação de E / S. A função readFile () é executada primeiro na ordem da aparência, mas o programa não espera a conclusão da função de leitura de arquivos. Uma vez que a função comece a ler o arquivo, ele passa o controle para executar a próxima instrução imediatamente para que o programa imprima “Lendo arquivo” antes de imprimir os dados do arquivo.

Quando a E / S do arquivo estiver completa sem nenhum erro, ela chamará a função de função de retorno de chamada (err, dados) e retornará os dados do arquivo como parâmetros, imprimindo os dados abaixo da mensagem "Reading file" no console. Portanto, não há bloqueio de operações de E / S e todas as operações são executadas de forma assíncrona. O Node. json" e podem ser facilmente distribuídos com o upload de um único arquivo "package. json" para o servidor, em vez de fazer o upload da pasta grande "node-modules". Após a atualização ou o upload, a emissão do comando "npm install" instala os módulos e dependências específicos. Portanto, os aplicativos Node. js são leves, flexíveis e facilmente compartilháveis (PASQUALI, 2013).

js mantém a velocidade e a eficiência do sistema geral. Tabela 1: Resultados de desempenho do Node. js Fonte: LEI et al. A Tabela 1 ilustra os resultados de desempenho do Node. js em comparação com PythonWeb e PHP ao calcular Fibonacci (8/18/19). js ainda mantém a qualidade processando solicita 20 vezes mais que PHP e leva um tempo relativamente curto, cerca de 17ms (Lei et al. Embora o Node. js seja uma escolha ideal para aplicativos intensivos em E / S escaláveis ​​e orientados por dados, ele não é uma solução perfeita para todos os aplicativos. Ele usa JavaScript para que seja mais eficiente quando usado com outras tecnologias baseadas em JavaScript. O uso de single-thread para manipular. Framework Express O framework Express é um módulo do node que fornece uma estrutura mínima e flexível para aplicativos da Web Node.

js. Ele funciona sobre os módulos do nó principal sem ocultar nenhum dos recursos do Node. js. Além disso, ele fornece funções robustas e limpas para adicionar aos módulos de nó, de modo que o desenvolvimento do aplicativo Node. Essa é a principal funcionalidade de um servidor da Web e requer excelentes métodos de roteamento para atender à solicitação. O Express facilita muito esse trabalho tedioso, permitindo que os desenvolvedores criem rotas em estrutura simples. Uma rota no Express é uma combinação de um verbo HTTP e um caminho. O verbo HTTP é geralmente um dos quatro métodos HTTP: GET, POST, PUT e DELETE, e o caminho é a localização do recurso (URI) (DUCKETT, 2016). Uma rota básica no Express é criada como abaixo: app. A estrutura de aplicativo criada pelo gerador Express possui um diretório separado para rotas, visualizações e arquivos de renderização pública.

No entanto, a estrutura do aplicativo é apenas uma das muitas maneiras de estruturar um aplicativo Express. Ele pode ser facilmente modificado durante o processo de desenvolvimento do aplicativo para atender aos requisitos do aplicativo (PASQUALI, 2013). MongoDB O MongoDB é um banco de dados de documentos de código aberto e não relacional. Ele se desvia da necessidade de criar o Object Relational Mapping (ORM), para o rápido desenvolvimento de aplicativos. DUCKETT, 2016). Um exemplo básico de um documento MongoDB é demonstrado s seguir Figura 10: Exemplo de uma aplicação Mongo DB { "firstName": "Wesley", "lastName": "Fernando Simonini", _id: ObjectId("507f1f77bcf86cd799439011") } Fonte: Próprio autor O código acima ilustra um snippet de código de uma coleção do MongoDB. O documento armazena os nomes e sobrenomes de um cliente.

Ao contrário dos bancos de dados relacionais tradicionais, o MongoDB não mantém um conjunto de dados correspondente a um conjunto de colunas, em vez disso, usa o conceito de par nome-valor para armazenar dados (GYŐRÖDI et. al. Um dos recursos que faz o MongoDB se destacar contra os bancos de dados tradicionais é a inclusão do esquema dinâmico. Coleções no MongoDB têm diferentes esquemas e os documentos dentro da mesma coleção podem ter tantos esquemas e formas diferentes quanto necessário. Esse recurso permite que os desenvolvedores comecem a armazenar dados no banco de dados com qualquer consideração sobre o design estrutural do banco de dados. As chaves e valores dos documentos podem ser alterados e atualizados quando necessário, uma vez que não existe uma regra pré-definida que governe a validação do tipo de dados (GYŐRÖDI et.

al. usuários. Isso mostra que o MySQL levou um minuto e oitenta e cinco segundos para inserir 10. usuários, enquanto o MongoDB levou apenas 0. segundos para executar a mesma tarefa. Isso prova que o MongoDB é excelente na execução de grandes operações de leitura e gravação (GYŐRÖDI et. Mongoose é uma modelagem de dados do MongoDB para Node. js. Ele foi criado para resolver o problema de escrever validação complexa de dados, conversão e lógica de negócios no MongoDB. Ele fornece um recurso de modelagem de dados simples e elegante para o aplicativo. Usando o mangusto, pode-se definir que tipo de dados pode estar em um documento e quais dados devem estar em um documento. A implementação real começa dentro do contêiner <div> onde o AngularJS é inicializado pela diretiva ng-app.

Em seguida, a diretiva ng-model associa o valor da entrada à variável "name" e, por fim, a diretiva ng-bind associa o innerHTML do elemento <p> à variável "name". Portanto, o nome digitado pelo usuário no campo de entrada é exibido dentro do elemento <p>. É uma prática comum usar a Expressão AngularJS em vez da diretiva ng-bind. Por exemplo, no caso acima, <p ngbind = ”name”> </ p> pode ser substituído por <p> {{name}} </ p> (DUCKETT, 2016). Quando a exibição é renderizada, quaisquer alterações nos dados do modelo ou componentes de exibição não são refletidas automaticamente na exibição. Se um usuário altera os valores de custo e quantidade para obter um novo total, o total não será atualizado automaticamente na exibição. No aplicativo AngularJS, se o usuário alterar os valores de custo e de qty, o novo total será exibido imediatamente na visualização, devido à visualização ativa fornecida pela vinculação do data-binding (DUCKETT, 2016).

Outra característica importante do AngularJS é a introdução da arquitetura MVC no front-end. No desenvolvimento web de fim de página, a visão e o controlador são geralmente colocados em um lugar. As dependências são tratadas automaticamente pelo subsistema do injetor AngularJS usando diferentes serviços e métodos de fábrica. Isso permite criar aplicativos fracamente acoplados, para que componentes individuais do aplicativo possam ser testados de forma isolada (DOCKETT, 2016). Implementação MEAN Stack Descrição do Projeto Portal de Notícias é o nome do protótipo do aplicativo da web que foi desenvolvido para ilustrar a implementação MEAN Stack em um projeto real. O aplicativo da web fornece recursos minimalistas de uma plataforma de ensino on-line. Um administrador pode criar notícias, fornecer descrições das notícias, incorporar vídeos e outros materiais.

Há uma separação completa entre a lógica do lado do servidor e do lado do cliente. O modelo é implementado no servidor e a visão e o controlador são implementados no cliente. Além disso, o aplicativo não se comunica diretamente com o servidor, mas usa APIs REST para alimentar os dados. O aplicativo usa as rotas criadas no AngularJS para navegar pelas páginas da Web, mas todos os dados são exibidos com a atualização de uma única página. Esta abordagem API SPAREST e a arquitetura MVC da aplicação estão ilustradas na figura 14 e figura 15: Figura 14: Pedido e resposta em aplicação MVC Fonte: Próprio autor. A API REST, então, envia dados JSON para o AngularJS SPA no navegador.

Configuração do Ambiente de Desenvolvimento O aplicativo foi desenvolvido no Notebook Samsung NVIDIA GeForce GTX 1060 Core i7-7700HQ 16GB 1TB Tela Full HD, 15. ” Windows 10 Odyssey NP800G5H-XG4BR. Além do hardware, vários programas e ferramentas foram baixados e configurados para configurar um ambiente para o aplicativo MEAN Stack. WebStorm IDE (Ambiente de Desenvolvimento Integrado) WebStorm IDE é um IDE leve e poderoso que facilita o desenvolvimento de um Aplicação MEIA. org/en/download. Figura 17: Site do Node. js Fonte: Próprio autor Figura 18: Verificação da versão para baixar do Node. js Fonte: Próprio autor Após o download e a instalação, ele pode ser verificado emitindo o comando –v do terminal ou CLI, conforme ilustrado na figura 19. Figura 19: Verificação da versão do Node.

MongoDB. com/downloadcenter#community. Depois de localizar a pasta baixada, o servidor MongoDB pode ser iniciado com um simples comando do terminal: mongod, conforme ilustrado na figura 22. Figura 22: Iniciando o servidor MongoDB Fonte: Próprio autor Figura 23: Servidor MongoDB Fonte: Próprio autor Como ilustrado na figura 16, o MongoDB pode ser iniciado com o mongod de comando único. Outras informações sobre o MongoDB também podem ser vistas na figura. json" contém todas as dependências necessárias para executar o aplicativo. O arquivo ‘app. js’ (~ / MEANapp / app. js) contém todo o middleware do Express e as rotas da API do aplicativo. O arquivo "www" contém o comando para iniciar o servidor na porta 3000. json", que fornece informações gerais sobre o aplicativo. Ele contém o nome do aplicativo, a versão e todas as dependências.

Na linha 6, o código mostra que o aplicativo precisa dos scripts no arquivo / bin / www para iniciar o servidor e pode ser iniciado com o comando node. bin/www. app. A função app. use () informa ao aplicativo para usar os parâmetros fornecidos dentro dos colchetes. Depois de criar o banco de dados e configurar o Mongoose e o Express (consulte a Figura 26), as classes de modelo foram criadas usando o Mongoose. Um esquema simples para o portal é ilustrado na figura 27 abaixo. Figura 27: Informações do modelo do Portal Fonte: Próprio autor A Figura 27 ilustra a classe de modelo para o curso. As rotas são definidas no arquivo public / app. js. Routes no AngularJS Figura 29: Routes - AngularJS Fonte: Próprio autor A Figura 29 ilustra o mecanismo de roteamento no AngularJS.

As rotas referem-se às páginas para executar operações CRUD. A primeira linha de código adiciona ngRoute como uma dependência no módulo do aplicativo e, em seguida, usa $ routeProvider para configurar as rotas. O módulo controlador usa o método $ http. get para consumir o serviço REST no URI fornecido (/ api / v1 / courses). Ele atribui o JSON retornado da API ao $ scope. courses, que define um objeto de modelo chamado courses. Em seguida, o AngularJS vincula o objeto portal_noticias ao DOM do aplicativo, exibindo-o no navegador do usuário. HTML. O URL contém o sinal # (hash), que indica o mecanismo de roteamento do SPA. O aplicativo faz o download de todos os recursos necessários na primeira solicitação e continua atualizando as exibições posteriormente.

Figura 33: Detalhes das notícias Fonte: Próprio autor Um usuário pode procurar as notícias na página do portal e clicar no link para acessar os detalhes. No entanto, a página em si não é recarregada, o aplicativo solicitará os detalhes da notícia da API REST e os dados JSON enviados de volta da API serão atualizados na página. Essas práticas podem levar à repetição de dados e aos arrays ilimitados, o que pode causar um grande problema em grandes aplicativos corporativos com enormes quantidades de dados relacionados. O segundo problema foi com o tempo de carregamento inicial do SPA. Como o SPA faz o download de todos os recursos no primeiro carregamento, demorou bastante tempo para o aplicativo carregar primeiro. O tempo de carregamento pode ser maior se o aplicativo da Web usar vários gráficos pesados ​​e multimídia.

Embora o desenvolvimento de APIs REST seja bom no desenvolvimento a longo prazo, ainda é uma tarefa adicional ao tentar desenvolver um pequeno aplicativo da Web em um curto período de tempo. Todos os componentes de construção MEAN Stack, MongoDB, Express, AngularJS e Node. js foram estudados em grande detalhe. Os pontos fortes e fracos de cada componente foram analisados, e também foram comparados com as outras tecnologias. Depois de estudar os aspectos teóricos da pilha, o foco foi deslocado na implementação prática da pilha. Como resultado, um protótipo de aplicativo da Web foi desenvolvido com a pilha MEAN. No entanto, a pilha MEAN executa bem em aplicações web em tempo real com dados em rápido crescimento. É útil para criação rápida de protótipos e configuração rápida de um servidor Web e aplicativo da Web para empresas iniciantes.

Com toda a comunidade de desenvolvedores de JavaScript por trás da pilha, a pilha permanecerá e evoluirá com o tempo. Agradecimento Sou agradecido por ter realizado esta especialização em uma instituição tão conceituada como a XXXXX, porém existem muitas pessoas para agradecer por sua parte neste processo rumo ao sucesso. Gostaria de agradecer primeiro aos meus professores, que além de ótimos professores, foram amigos. Casa do Código. ISBN: 9781783985876. págs. ANGULARJS, Google. Superheroic JavaScript MVW Framework. págs. DUCKETT, Jon. Javascript e Jquery - Desenvolvimento de Interfaces Web Interativas. ed. Elsevier. Institute of Distributed Systems Faculty of Engineering and Computer Science Ulm University. pags. Disponível em: www. benjamin-erb. de. págs. MATTOS, Vitor. Conhecendo a stack MEAN: MongoDB, Express, Angular e Node. Disponível em: http://blog.

caelum. pg. ROUTLEDGE. An Encyclopaedia Of The History Of Technology. ed. IAN Mcneil. História da Computação. ed. Elsevier. ISBN: 9788535285451. págs.