O documento discute a tecnologia FrontEnd, incluindo linguagens como HTML, CSS e JavaScript. Também cobre frameworks como Angular, Bootstrap e Sass, além das linguagens TypeScript e NativeScript para desenvolvimento de aplicativos móveis nativos usando JavaScript.

1. 1
Leandro Mancini
FrontEnd
WorkShop

2. 2
FrontEnd
É responsável por
“dar vida” à
interface.
HTML (linguagem de marcação)
CSS (linguagem de estilo)
JavaScript (linguagem de script/programação)
Trabalha com a parte da
aplicação que interage
diretamente com o usuário.

3. 3
Linguagens e
Frameworks
Nos últimos anos, esta área
também viu a introdução de
outras linguagens e frameworks,
como TypeScript, Angular,
Bootstrap, Sass, etc.
Que podem ser utilizadas de
acordo com as necessidades da
aplicação.

4. 4
TypeScript
Subconjunto de
JavaScript
TypeScript é uma linguagem de programação criada e mantida pela Microsoft.
Basicamente é um subconjunto de JavaScript que acrescenta tipagem de objetos
(opcional), estrutura de classes e é totalmente baseada em programação orientada a
objeto.
Por ser um superconjunto do JavaScript, qualquer código dessa linguagem pode ser
colocado em um arquivo TypeScript.

5. 5
Nativescript
É um framework open source
para construção de aplicativos
móveis nativos usando
JavaScript ou Typescript
Por que Nativescript ?

6. 6
01 Desempenho nativo
UI bonita, acessível, nativa em
plataforma - sem WebViews.
03
Fácil de aprender
Use as habilidades da web que você já tem para
desenvolver aplicativos verdadeiramente nativos
com JavaScript, CSS e marcação de UI nativa.
02 Extensível
Reutilize facilmente os plug-ins
existentes do npm.
04
Plataforma cruzada
Escreva e implante aplicativos móveis
nativos para iOS e Android a partir de
uma única base de código.
05 Open Source
O NativeScript é 100% gratuito e de
código aberto.

7. 7
npm install -g nativescript
Instalação
Após a instalação, a configuração do sistema deve ter:
JDK 8 e SDK para Android

8. 8
Angular +
NativeScript = ❤
Com o NativeScript e o Angular,
uma única base de código pode
ser usada para criar aplicativos
da Web e aplicativos móveis
nativos com desempenho e
energia 100% nativos.

9. 9
tns create <NomeDoProjeto>
Criando aplicativos

10. 10
Passo 1
Acesse as configurações do Android,
deslize a tela até o fim e toque em
"Sobre o dispositivo".
Passo 2
No fim da tela, toque rapidamente
sete vezes seguidas sobre "Número
da versão". Faça isso até ver a
mensagem "Você agora é um
desenvolvedor".
Passo 3
Voltando à tela principal de
configurações, um novo menu
chamado "Programador" estará
disponível. Abra para ativar ou
desativar as ferramentas de
desenvolvedor.
Modo
Desenvolvedor
Como ativar a depuração
USB do Android

11. 11
Executando
tns run android ou tns preview

12. 12
Botão
Formulário
Imagem
Inventário
Página de login

13. 13
Layouts
É a marcação base de
todas as visualizações que
fornecem posicionamento
de elementos filho.

14. 14
Comandos CLI
Extensões de comando da
CLI do NativeScript para
adicionar alguns dos
comandos da CLI Angular.
Para gerar um componente, execute:
tns generate component <component-name>
Para criar um componente dentro de um módulo, execute:
tns generate component <component-name> <module-name>
Para criar um módulo, execute:
tns generate module <module-name>

15. Mão na massa
Mão na massa
Mão na massa
Mão na massa

16. Leandro Mancini
leandro.sousa@praxio.com.br
Obrigado