Get Started. It's Free
or sign up with your email address
O que é o Ionic by Mind Map: O que é o Ionic

1. Simplicidade

1.1. Ser fácil de aprender e criar apps

2. Desktop

2.1. Electron

3. Browsers que suportam o Ionic

3.1. Mobile

3.1.1. Ionic 5

3.1.1.1. Android 5+

3.1.1.2. iOS 11+

3.1.2. Ionic 4

3.1.2.1. Android 4.4+

3.1.2.2. iOS 10+

3.2. Desktop

3.2.1. Ionic 5

3.2.1.1. Chrome

3.2.1.2. Safari

3.2.1.3. Edge 79+

3.2.1.4. Firefox

3.2.2. Ionic 4

3.2.2.1. Chrome

3.2.2.2. Safari

3.2.2.3. Edge

3.2.2.4. Firefox

3.2.2.5. IE 11

3.3. Browser Support - Ionic Documentation

4. Não é WebView

5. É um framework de UI para apps mobile, web ou desktop criado usando tecnologias web (HTML, CSS e Javascript)

5.1. Stencil

5.1.1. https://stenciljs.com/

6. Atualmente é integrado a projetos com Angular e React. Vue esta em construção (Beta).

7. Focado na experiencia de interface de usuário

8. Licença

8.1. MIT

8.1.1. Pode ser usado para projetos pessoais e comerciais

9. Metas

9.1. Ser multi plataforma

9.1.1. Android

9.1.2. iOS

9.1.3. PWA

9.1.4. Desktop

9.2. Baseado nos padrões web

9.2.1. Construído usando HTML, CSS e Javascript

9.2.2. Usando APIs modernas como Custom Elements e Shadow DOM

9.2.2.1. Custom Elements

9.2.2.1.1. É uma maneira de criar novas tags HTML

9.2.2.2. Shadow DOM

9.2.2.2.1. Remove complicações do desenvolvimento web

9.2.2.2.2. Complicações geradas naturalmente em aplicações que vão ficando muito grandes

9.2.2.2.3. Ex.: Class CSS repetidas e com isso usamos o !important para corrigir

9.2.2.2.4. Isso é corrigido adicionando escopo na plataforma

9.3. Design bonito

9.3.1. Clean simples e funcional

10. Como gerar um app nativo?

10.1. Mobile

10.1.1. Capacitor

10.1.1.1. Sucessor do Cordova

10.1.1.1.1. WebView

10.1.1.2. Inspirado em frameworks como o React Native e Turbolinks

10.1.1.3. Faz a integração com a parte nativa para web, mobile e desktop

10.1.2. Cordova

10.1.2.1. WebView

10.1.2.2. Consegue ser compatível com muitos plugins do cordova

10.2. Infinidade de plugins

11. Preparação do Ambiente de desenvolvimento Web (PWA)

11.1. Environment Setup - Ionic Documentation

11.1.1. Node

11.1.2. Git

11.1.3. Composer

11.2. Installing Ionic - Ionic Documentation

11.3. Visual Studio Code

11.3.1. Angular Extension Pack

11.3.1.1. Loiane Groner

11.3.1.1.1. youtube.com/loianegroner

11.3.2. Angular Extension Pack - Visual Studio Marketplace

11.3.3. Dracula Official

11.3.3.1. Powershell

11.3.3.1.1. PowerShell - Visual Studio Marketplace

11.3.3.2. Dracula Official - Visual Studio Marketplace

12. Desenvolvendo com Ionic

12.1. Criando um app

12.2. Testando localmente

12.2.1. ionic serve

12.3. Estrutura do projeto

12.3.1. Angular

12.4. Criando novas funcionalidades

12.4.1. directives

12.4.2. class

12.4.3. page

12.4.4. component

12.4.5. service

12.4.6. module

12.4.7. guard

13. Arquitetura Node, npm, Ionic, Angular, React

13.1. O que é o NodeJS

13.1.1. Linhas de comando rodam em cima do node

13.2. O que é o npm