AngularJs é um framework JavaScript para criar aplicações web dinâmicas usando Single Page Applications (SPAs). Ele facilita o desenvolvimento, teste e desempenho de aplicações web através de ligação de dados, injeção de dependência e abstração da manipulação do DOM. AngularJs pode ser usado com várias arquiteturas como MVC, MVP e MVVM.
Palestra ministrada na SECOMP Betim na PUC-MG de Betim sobre a nova tendência em arquitetura de sistemas Web e explicar sobre a questão do estilo arquitetural SOFEA.
Aprenda um pouco mais sobre as novas tendências para desenvolvimento web e os conceitos utilizados pelos novos frameworks como Knockout, Ember, Angular, Backbone, Spine, etc. Saiba um pouco mais sobre MVC, MVP, e MVVP.
Palestra ministrada na SECOMP Betim na PUC-MG de Betim sobre a nova tendência em arquitetura de sistemas Web e explicar sobre a questão do estilo arquitetural SOFEA.
Aprenda um pouco mais sobre as novas tendências para desenvolvimento web e os conceitos utilizados pelos novos frameworks como Knockout, Ember, Angular, Backbone, Spine, etc. Saiba um pouco mais sobre MVC, MVP, e MVVP.
Android: Avaliação do Pré-projeto Agenda CulturalVinícius Thiengo
➙ Conteúdo completo, incluindo vídeo, em: https://www.thiengo.com.br/android-avaliacao-do-pre-projeto-agenda-cultural
Neste conjunto de slides vamos, passo a passo, a avaliação de um pré-projeto de aplicativo Android, mais precisamente o app Agenda Cultural.
Iremos avaliar tanto o mapa mental de discussão de ideia de aplicativo, onde há requisitos e regras de negócios, como também a principal tela do protótipo estático do projeto.
➙ Para receber o conteúdo do blog em primeira mão, assine a lista de emails em: http://www.thiengo.com.br
Abraço.
▶ Treinamento oficial:
➙ Prototipagem Profissional de Aplicativos Android:
↳ https://www.udemy.com/android-prototipagem-profissional-de-aplicativos/?persist_locale&locale=pt_BR
▶ Livros oficiais:
➙ Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia:
↳ https://www.thiengo.com.br/livro-desenvolvedor-kotlin-android
➙ Receitas Para Desenvolvedores Android:
↳ https://www.thiengo.com.br/livro-receitas-para-desenvolvedores-android
➙ Refatorando Para Programas Limpos:
↳ https://www.thiengo.com.br/livro-refatorando-para-programas-limpos
▶ Redes:
➙ Udemy: https://www.udemy.com/user/vinicius-thiengo/?persist_locale&locale=pt_BR
➙ YouTube: https://www.youtube.com/user/thiengoCalopsita
➙ Facebook: https://www.facebook.com/thiengoCalopsita
➙ LinkedIn: https://www.linkedin.com/in/vin%C3%ADcius-thiengo-5179b180/
➙ GitHub: https://github.com/viniciusthiengo
➙ Twitter: https://twitter.com/thiengoCalops
➙ Google Plus: https://plus.google.com/+ThiengoCalopsita
▶ Blog App:
➙ https://play.google.com/store/apps/details?id=br.thiengocalopsita&hl=pt_BR
Lightning components - o que são, quais os seus objectivos e exemplos práticosDom Digital
A framework Lightning Componente permite criar facilmente componentes e aplicações modernas na plataforma Salesforce.
Neste slide descubra o que são lightning components, quais os seus objectivos.
Copyright @ Dom Digital 2016
Apresentação realizada na disciplina de Aplicações Corporativas como cumprimento do curso de Sistemas para Internet do Unipê (Centro Universitário de João Pessoa)
Android: Avaliação do Pré-projeto Agenda CulturalVinícius Thiengo
➙ Conteúdo completo, incluindo vídeo, em: https://www.thiengo.com.br/android-avaliacao-do-pre-projeto-agenda-cultural
Neste conjunto de slides vamos, passo a passo, a avaliação de um pré-projeto de aplicativo Android, mais precisamente o app Agenda Cultural.
Iremos avaliar tanto o mapa mental de discussão de ideia de aplicativo, onde há requisitos e regras de negócios, como também a principal tela do protótipo estático do projeto.
➙ Para receber o conteúdo do blog em primeira mão, assine a lista de emails em: http://www.thiengo.com.br
Abraço.
▶ Treinamento oficial:
➙ Prototipagem Profissional de Aplicativos Android:
↳ https://www.udemy.com/android-prototipagem-profissional-de-aplicativos/?persist_locale&locale=pt_BR
▶ Livros oficiais:
➙ Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia:
↳ https://www.thiengo.com.br/livro-desenvolvedor-kotlin-android
➙ Receitas Para Desenvolvedores Android:
↳ https://www.thiengo.com.br/livro-receitas-para-desenvolvedores-android
➙ Refatorando Para Programas Limpos:
↳ https://www.thiengo.com.br/livro-refatorando-para-programas-limpos
▶ Redes:
➙ Udemy: https://www.udemy.com/user/vinicius-thiengo/?persist_locale&locale=pt_BR
➙ YouTube: https://www.youtube.com/user/thiengoCalopsita
➙ Facebook: https://www.facebook.com/thiengoCalopsita
➙ LinkedIn: https://www.linkedin.com/in/vin%C3%ADcius-thiengo-5179b180/
➙ GitHub: https://github.com/viniciusthiengo
➙ Twitter: https://twitter.com/thiengoCalops
➙ Google Plus: https://plus.google.com/+ThiengoCalopsita
▶ Blog App:
➙ https://play.google.com/store/apps/details?id=br.thiengocalopsita&hl=pt_BR
Lightning components - o que são, quais os seus objectivos e exemplos práticosDom Digital
A framework Lightning Componente permite criar facilmente componentes e aplicações modernas na plataforma Salesforce.
Neste slide descubra o que são lightning components, quais os seus objectivos.
Copyright @ Dom Digital 2016
Apresentação realizada na disciplina de Aplicações Corporativas como cumprimento do curso de Sistemas para Internet do Unipê (Centro Universitário de João Pessoa)
Angular, React ou Vue? Comparando os favoritos do JS reativoGDGFoz
Angular, React ou Vue? Comparando os favoritos do JS reativo - Luana Guillande
Conheça os prós e contras dos três Frameworks/bibliotecas de javascript reativo mais utilizados no mundo e descubra quando e porquê é mais indicado usar cada um deles.
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAWilson Mendes
Angularjs é um framework javascript construido e mantido pelo grupo de engenheiros do Google, ele usa o HTML como uma “template engine”, tudo isso no intuito de fornecer uma solução completa para o cliente-side de sua aplicação. Além disso tem total compatibilidade com as bibliotecas javascript mais utilizadas, como jQuery. é um novo conceito para desenvolvimento de web apps client-site.
O desenvolvimento de aplicações web client-side traz consigo desafios arquiteturais equivalentes ao modelo tradicional implementado no lado servidor. Com base nesta afirmação, é necessário modelar e implementar uma arquitetura capaz de atender a todos os requisitos arquiteturais de um software. Para exemplificar este desafio, iremos propor um modelo de uma arquitetura utilizando o framework AngularJS, descrevendo suas principais características e como podemos aplicá-las em uma arquitetura front-end.
Palestra realizada no evento The Developer's Conference 2014 em Florianópolis / SC junto o Michel Graciano.
Treinamento básico sobre ASP.NET MVC ministrado na área de tecnologia para o negócio na Localiza Rent a Car S/A, com objetivo de nivelamento de conceitos e entendimento da tecnologia.
Essa palestra tem o objetivo de apresentar conceitos de construção de aplicações escaláveis e de fácil manutenção, aplicando padrões de projetos conhecidos mas com Node.js
2. O que é AngularJs
AngularJs é um framework baseado em Java Script usado para criar
aplicações web de forma dinâmica . Trabalha dinamicamente com SPA (Single
Page Application) .
O vinculo direto de dados e injeção de dependência Guice elimina muito
código que deveria ser escrito . Tudo isto acontece dentro do browser
tornando fácil o uso de qualquer tecnologia de servidores .
Ele é o que o html deveria ser !
Tem o objetivo de tornar mais rápido o desenvolvimento e teste de aplicações
web .
4. História do AngularJs
AngularJS foi originalmente desenvolvido em 2009 por Misko Hevery e
Adam Abrons como um software por trás de um serviço de
armazenamento JSON(JavaScript Object Notation) online, que teria
preço estimado por megabyte, para aplicações pré-construídas (easy-to-
make) para as empresas.
Este empreendimento foi disponibilizado em "GetAngular.com", e teve
alguns inscritos, antes de os dois decidirem abandonar a ideia comercial e
distribuir Angular como uma framework open-source.
Abrons deixou o projeto, mas Hevery, que trabalha no Google continuou
seu desenvolvimento e manteve o framework em conjunto com alguns
colegas do Google como Igor Minár e Vojta Jína .
5. História do AngularJs
O Angular encontra-se hoje na versão estável 1.4.8 e já possui a versão beta
2.0
Com a versão 2.0 espera-se :
Aumento de velocidade no desenvolvimento e performance.
X Plataform : IOS , Android , Desktop e web .
Ganhos com a padronização
Mais simplicidade no desenvolvimento
Time de desenvolvimento
6. SPA - Single Page Application
As SPAs são aplicações completas, desenvolvidas em JavaScript, que
funcionam quase como se estivessem sendo executadas nativamente no
desktop.
O Google foi pioneiro nesta tecnologia e o mundo o seguiu.
Atualmente, a maior parte das aplicações “web 2.0” usam este modelo: o
Gmail, a busca do Google, o Google Drive, Facebook, o Twitter, o
FourSquare, o Instagram, blogs, sites corporativos, dentre outros.
7. Abordagem do AngularJs
O HTML trabalha apenas com páginas estáticas o que limita muito o seu uso e
para utilizar recursos dinâmicos com o HTML temos duas possibilidades :
Bibliotecas : Onde carregamos junto com nosso código como por exemplo ,
a JQuery .
Framework : Que disponibiliza recursos para o uso de recursos dinâmicos
O AngularJS é construído sob a crença de que a programação declarativa é
melhor do que a programação imperativa quando se trata da construção de
interfaces com o usuário e da conexão de componentes software, enquanto a
programação imperativa é excelente para a escrita de regras de negócio.
8. Abordagem do AngularJs
O framework Angular adapta e estende o HTML tradicional para uma melhor
experiência com conteúdo dinâmico, com a ligação direta e bidirecional dos
dados (two-way data-binding) que permite sincronização automática de
models e views .
Como resultado, AngularJS abstrai a manipulação do DOM(Document Object
Model) e melhora os testes. Com isso é possivel :
Abstrair a manipulação do DOM da lógica do aplicativo. Isto melhora os
testes do código.
9. Abordagem do AngularJs
Considera os testes do aplicativo tão importantes quanto seu
desenvolvimento. A dificuldade do teste é diretamente afetada pela
maneira como o código é estruturado.
Abstrai o acoplamento entre o lado cliente e o lado servidor da aplicação.
Isto permite que o desenvolvimento do aplicativo evolua em ambos os
lados, de forma paralela, e permite o reuso de código.
Guia os desenvolvedores através da construção de todo o aplicativo: desde
o design de Interface, passando pela escrita das regras de negócio, até
chegar aos testes da aplicação.
10. Abordagem do AngularJs
Usando injeção de dependencia Guice, o Angular traz serviços
comumente designados ao lado servidor da aplicação, como controllers
para os componentes visuais, para o lado cliente da aplicação.
Consequentemente, o peso do backend é radicalmente reduzido,
tornando as aplicações muito mais leves.
Angular ensina o navegador nova sintaxe através de uma construção que
chamamos de directivas.
Angular trabalha facilmente com múltiplas arquiteturas como MVC , MVP e
MVVM .
Nasceu com o objetivo de acelerar o desenvolvimento de CRUD(Create ,
11. Não sofra mais com ...
Registro de retorno de Callback : Remover código clichê comum, tais
como chamadas de retorno é uma coisa boa porque reduz a quantidade
de codificação JavaScript você tem que fazer, e isso torna mais fácil para
ver o que seu aplicativo faz.
Manuseio do DOM : DOM é o pilar de aplicações AJAX, mas é complicado e
propenso a erros. Pela abordagem declarativa que descreve como a
UI(Interface do Usuário) deve mudar à medida que as suas alterações
ocorrem você se livra do baixo nível tarefas de manipulação DOM. A
maioria dos aplicativos escritos com Angular nunca tem que manipular
programaticamente o DOM, embora você possa se você quiser.
12. Não sofra mais com ...
Empacotamento de dados para UI : operações CRUD compõem a maioria
das tarefas dos aplicativos Ajax(Asynchronous Javascript and XML). O
empacotamento feito pelo Angular padroniza e elimina quase todo
código clichê , permitindo o gerenciamento do fluxo geral da aplicação,
em vez de todos os detalhes de implementação.
Inicio da aplicação e ambiente : Normalmente você precisa escrever um
monte de código só para ter um exemplo "Hello World" em AJAX. Com
Angular você pode inicializar facilmente os serviços, que são auto-injetado
em seu aplicativo . Isso permite que você comece a desenvolver
rapidamente. Como um bônus, você tem controle total sobre o processo
de inicialização em testes automatizados.
13. Arquitetura - MVC
MVC é um padrão de arquitetura de software (design pattern) que separa a representação da
informação da interação do usuário com ele.
O modelo (model) consiste nos dados da aplicação, regras de negócios, lógica e funções.
Uma visão (view) pode ser qualquer saída de representação dos dados, como uma tabela ou um
diagrama. É possível ter várias visões do mesmo dado, como um gráfico de barras para
gerenciamento e uma visão tabular para contadores.
O controlador (controller) faz a mediação da entrada, convertendo-a em comandos para o modelo
ou visão. As ideias centrais por trás do MVC são a reusabilidade de código e separação de conceitos.
15. Arquitetura - MVP
MVP é uma evolução do MVC que se comunica bidirecionalmente com as outras camadas, evitando que o Model tenha que se
comunicar diretamente com o View sem passar pelo Controller e este último é fundamental para a interação com o usuário. O
MVP desacopla as funções e torna a arquitetura ainda mais modular.
A camada Presenter é ciente de tudo o que ocorre nas outras duas camadas e deixa-as cientes do que ela está fazendo.
A interação com usuário é feita primariamente pelo View, e este pode delegar ao Presenter determinadas tarefas.
Há uma relação um-para-um entre estas camadas. Nesta relação há uma referência do View para o Presenter mas não o
oposto.
É possível vincular dados do View com o Model através de data binding. Isto ocorre na variação Supervising Controller, em
oposição à variação Passive View onde a View essencialmente só possui o desenho da UI.
O View pode conter código para manipular a UI.
Por causa do total desacoplamento, testar se torna uma tarefa mais simples.
17. Arquitetura - MVVM
MVVM é uma pequena evolução do MVP em um lado e um retrocesso em outro. Nele o ViewModel não está ciente do que
ocorre no View mas este está ciente do que ocorre no ViewModel. No caso do Model ambos estão cientes do que ocorre em
cada um.
O nome se dá porque ele adiciona propriedades e operações ao Model para atender as necessidades do View, portanto ele cria
um novo modelo para a visualização.
É possível associar vários Views para um ModelView. É comum que os Views sejam definidos de forma declarativa (HTML/CSS,
XAML, etc.).
O data binding é feito entre o View e o ViewModel.
Com este padrão é possível reduzir a quantidade de código para manter. Algumas automações são possíveis por ter todas as
informações necessárias no ViewModel.
É um padrão que está intimamente ligado ao WPF (Windows Presentation Foundation)
20. Arquitetura - MVW
Exposto os modelos de arquitetura podemos afirmar que o AngularJs
trabalha com qualquer arquitetura e por isso ele também é conhecido
como framework MVW (Model - View - Whatever )
21. Pontos positivos do Angular
Mantido pelo Google
Documentação , API e plugins em abundância
Utilização de Java Script
Uso do html como um template de Java Script
Orientado para o SPA
Curva de aprendizado rápido
Integração com testes
22. Pontos negativos do Angular
Retrocompatilidade da versão 2 com as anteriores
Maior integração com o DOM
Client-Side pode ter consequências negativas como :
Dependência do ambiente e browser do usuário.
Lentidão com os indexadores de redes sociais que demandam mais trabalho para
contornar o problema.
Estatisticas e monitoramento fragmentado
Não é trivial o seu uso adaptado em aplicações já concebidas
Arquitetura da aplicação
23. Visão Geral
Templates
São os arquivos html que recebem as tags(marcadores) do Angular .
Compilador
Efetua o processamento do template , renderiza o DOM e exibe a View
Diretivas
São marcadores em um elemento DOM que atribui um comportamento especifico a esse
elemento ou até mesmo aos seus herdeiros .
Angular usa diversas diretivas de diversos tipos
ng-app : Trata da aplicação
24. Visão Geral
Módulos
São containers para diferentes partes da sua aplicação como controllers , serviços , etc
Injeção de dependência
É um design pattern que lida como os componentes administram e resolvem suas
dependências.
Services
Services são objetos substituíveis que estão ligados entre si usando a injeção de
dependência . Você pode usar os services para organizar e compartilhar código em seu
aplicativo.
25. Visão Geral
Scope
Scope é um objeto que se refere ao model da aplicação. É um contexto de execução à
manifestação. Scopes estão dispostos na estrutura hierárquica que imitam a estrutura
dos DOM a aplicação. Scopes podem suportar expressões e propagar eventos.
$watch - observa a alteração no model
$apply - propaga alteração no model
$scope - propriedade de dados
Filter
Um filtro formata o valor de uma expressão para exibição para o usuário.
26. SEGURANÇA
Angularjs expressões são SandBoxed(acesso restrito) não por razões de
segurança, mas para manter adequadamente a separação de
responsabilidades de aplicação.
No entanto, este sandbox não pretende parar ataques que podem editar o modelo antes de
ser processado por Angular.
Recomendamos na criação de sua aplicação :
Não misture modelos Client-Side com Server-Side. É possivel mas não misture !
Não use a entrada do usuário para gerar modelos dinamicamente
Não execute a entrada do usuário com $scope.$eval
Considere o uso de CSP - Content Security Policy , mas não confie apenas nisso .
27. MEAN
MEAN
M - Mongo DB : Banco de dados orientado a documentos
E - Express : Framework de desenvolvimento web para Node
A - AngularJs : Client Side aplicação
N - Node.JS : Server Side aplicação com Java Script
Temos a vantagem de não precisar saber nenhuma linguagem além do JavaScript que também é
uma grande vantagem quando queremos utilizar um banco de dados NoSql, como o MongoDB, já
que estaremos trabalhando direto com objetos muito similares ao JSON.
Essas características tornam o MEAN ideal para rápida prototipação de software e desenvolvimento
de aplicações escaláveis com abordagem Client-Side e Server-Side de forma segura . Por ser usado