Apps Híbridos com Ionic 2, Angular 2 e Typescript

Kevin Nascimento

Analista Desenvolvedor @ AMcom

Blumenau, SC - Brasil
kevinnascimento

Roteiro

Aplicativo Nativo vs Híbrido
Apache Cordova
Ionic Framework
Componentes de UI
Ionic 2 e Angular 2
Typescript
Ecossistema Ionic

Qual escolher?

Nativo ou Híbrido?

Aplicativos Híbridos!

HTML5 que se parece com nativo
Web envolvido por uma camada nativa
Acesso direto às APIs nativas
Ambiente de desenvolvimento web familiar

1614 plugins

https://cordova.apache.org/plugins/

Material Design

SDKs Nativas ...

são cheias de recursos!

Components de UI bem definidas (Guidelines)
Views
Navigation and stack history
Transitions
Gestures

Animations
Modals
Gestures
Lists
Buttons
Tabs
Navigation
Scrolling
App Nativo

Mas não há uma SDK para a Web

É necessário preencher a lacuna entre web e nativa
É necessário componentes ricos, com estilo e interação que pareçam nativos
São necessárias UIs realmente pensadas para o ambiente móvel

Tecnologias Web que você já conhece

Já Conhece e Gosta

(Você vai se sentir em casa)

Construido com

AngularJS

Estende o HTML além da web

Uso em larga escala comprovado no desenvolvimento de aplicações

Componentes de UI usando Directives e Services

Sass

CSS gerado do preprocessador Sass

Altere facilmente o look and feel do seu app

O CSS foi pensado para ser facilmente sobreescrito

Baseado em variáveis com valores padrão

Mixins reusáveis

Seu app com um visual bonito por padrão !

Focado em nativo

Desenvolvido inspirado nas SDKs Nativas
Construído para funcionar com o Cordova

Obcecado por Perfomance

Hardware accelerated animations (CSS3)
Manipulação minima da DOM
Remove o delay de 300ms que a WebView impõe
(No more FastClick)

Agora sim temos um SDK Web

Seu App
Ionic
Angular
WebView (Cordova)
App Nativo

Ionic Components

Beta 11 vs RC

O que melhorou no Ionic 2?

Simplicidade - Clean Javascript

Rotas no Ionic 1

                $stateProvider
    .state('app.conf', {
        url: "/conf",
        views: {
            'menuContent': {
                templateUrl: "states/conf/conf.html",
                controller: 'ConfController'
            }
        }
    });

$state.go('app.conf');

NavController

Você não precisa mais criar rotas!

                
export class Page {

    constructor(private nav: NavController) {
    }

    openPage(view): void {
        this.nav.push(OtherPage);
    }
}