Desenvolvimento multiplataforma:

DÉBORA DUARTE

Publicidade e propaganda - unisinos

Quem sou eu?

 técnico em informática - IFSUL CAmpus Charqueadas

fullstack do petit

CMO AGÊNCIA FORÇA

Não seja hater!

o QUE É NATIVO?

DESENvolvimento na linguagem nativa de cada sistema operacional

o que é multiplataforma

criação de um aplicativo por meio de um único processo de desenvolvimento (ou uma única linguagem) que depois poderá ser compilado - ou não - para a linguagem nativa

pwa é a mesma coisa

mais ou menos...

um app desenvolvido e compilado pode ser instalado

a pwa possuí experiência offline e parecida com um app nativo.

Nem todo app multiplataforma é uma pwa, mas toda pwa é multiplataforma.

ferramentas/libs/frameworks/plataformas

xamarim

ionic

meteor

react native

cordova

phone gap

vantagens

melhor ux

extrair o máximo dos os (como interação com ferramentas e hardware)

nativo

um projeto para todos os sistemas operacionais

custos menores

menor tempo de desenvolvimento

equipe menor

multiplataforma

desvantagens

equipe maior

um projeto para cada os

custos elevados

maior tempo de desenvolvimento

nativo

nem sempre é fácil rodar em todos sistemas

experiência de usuário pode não ser tão boa

multiplataforma

xamarin vs native

xamarin vs native

API

DESENVOLVIMENTO

VIEW

BUILD

WEB

IOS

ANDROID

OUTROS

DIFERENÇAS NA LINGUAGEM

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default class Splash extends Component {

  render() {
      return (
          <View style={styles.wrapper}>
              <Text>Hello World</Text>
          </View>
      );
  }
}

const styles = StyleSheet.create({
  wrapper : {
  backgroundColor : 'green',
  flex : 1,
  justifyContent: 'center',
  alignItems: 'center'
  }
});

react native

DIFERENÇAS NA LINGUAGEM

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default class Splash extends Component {

  render() {
      return (
          <View style={styles.wrapper}>
              <Text>Hello World</Text>
          </View>
      );
  }
}

const styles = StyleSheet.create({
  wrapper : {
  backgroundColor : 'green',
  flex : 1,
  justifyContent: 'center',
  alignItems: 'center'
  }
});
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func showMessage(sender: UIButton) {
        let alertController = UIAlertController(title: "Welcome to My First App", message: "Hello World", preferredStyle: UIAlertControllerStyle.alert)
        alertController.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.default, handler: nil))
        present(alertController, animated: true, completion: nil)
    }

}

react native

swift

DIFERENÇAS NA LINGUAGEM

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default class Splash extends Component {

  render() {
      return (
          <View style={styles.wrapper}>
              <Text>Hello World</Text>
          </View>
      );
  }
}

const styles = StyleSheet.create({
  wrapper : {
  backgroundColor : 'green',
  flex : 1,
  justifyContent: 'center',
  alignItems: 'center'
  }
});
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func showMessage(sender: UIButton) {
        let alertController = UIAlertController(title: "Welcome to My First App", message: "Hello World", preferredStyle: UIAlertControllerStyle.alert)
        alertController.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.default, handler: nil))
        present(alertController, animated: true, completion: nil)
    }

}
package br.com.felipesilveira.helloworld;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class HelloWorld extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView view = new TextView(this);
        view.setText(&quot;Hello, Android&quot;);
        setContentView(view);
 
    }
}

react native

swift

android

quem usa

esse é o futuro?

sim e não!

any question:

twitter: @deboracardu

Obrigada!

Copy of deck

By Débora Duarte

Copy of deck

  • 833