Flutter, uma alternativa para o desenvolvimento mobile

Do início até o Flutter. Como é o desenvolvimento mobile e qual é real finalidade do framework

Transcript

1. Flutter, uma alternativa para o desenvolvimento mobile Thiago Santos Android Developer na Caju Tech
2. A long time ago in a galaxy far, far away...
3. Capitão Nativo - O Primeiro Vingador • iOS com Objective-C em 2008; • Android com Java em 2009; • O começo da disputa pela jóia do espaço.
4. Capitão Nativo - O Primeiro Vingador
5. WebViews - O Ataque dos Clones • Utiliza Javascript, HTML e CSS para desenvolvimento; • Se comunica com o nativo através de uma Bridge (Ponte); • Features dependente da versão do Webview no celular do cliente; • Performance comprometida pela Bridge.
6. WebViews - O Ataque dos Clones
7. JIT e AOT - A Era de Ultron • Frameworks javascript reativos; • Se comunica com o nativo através de uma Bridge (Ponte); • Transpila todo código de uma linguagem para outra; • Se comunica quase diretamente com o nativo; • Performance comprometida em certos momentos pela Bridge.
8. JIT e AOT - A Era de Ultron
9. Mundo Mobile - Guerra Infinita • Nativo com performance, mas lento relacionado a produtividade com front-end; • Híbrido com tecnologias Web, mas com performance comprometida; • Nativo com JIT/AOT, mas com Bridge/Runtime que acessam direto o OEM nativo causando problemas de performance; • SDK de Jogos, mas não recomendado para finalidades que não jogos. • Combine tudo, estale os dedos e prepare-se para os bugs.
10. Episódio IV - Uma Nova Esperança?
11. • SDK que facilita a criação de aplicativos modernos, bonitos e de alto desempenho; • Funciona no Android e no iOS; • Possui seu próprio conjunto de Widgets; • Estilo de componentes reativos como React; • Criado e mantido pelo Google; • Open Source. Flutter
12. Flutter - Arquitetura Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino
13. Capitã Skia
14. Dart - O Império Contra Ataca • É AOT; • Também trabalha com JIT; • Torna mais fácil a criação de animações e transições suaves que rodam a 60fps; • Evita utilizar JSX ou XML para criação de layout; • Sintaxe clara e concisa; • É rápida graças a sua estrutura de AOT; • Compila para ARM ou x86 para mobiles e transpila para JavaScript para Web; • É fácil de aprender para quem já conhece C++, C# ou Java; • Dart 2 lançado recentemente com foco em produtividade. https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf
15. Flutter em Ação
16. Episódio VI - O Retorno do Jedi
17. Flutter é para... • Designers - Uma única interface nas duas plataformas mobile mais utilizadas; • Prototipação - Protótipos em tempo recorde totalmente funcional; • Desenvolvedores - Dart é fácil e simples de usar, várias IDEs com suporte (Intellij, Android Studio e Visual Studio Code), Widgets altamente personalizáveis, e muito mais...
18. Episódio VII - O Despertar da Força
19. Tudo é Widget
20. Layout estilo Flexbox
21. Hot Reload
22. Inspector
23. Totalmente Compatível+
24. Alguns Exemplos
25. Fluxo de desenvolvimento orientado ao Design
26. Flutter - Coisas técnicas
27. Comandos • flutter doctor • flutter upgrade • flutter packages get • flutter packages upgrade • flutter format • flutter analyze • flutter create projectName • flutter run
28. pubspec.yaml name: flutter_project description: Flutter getting started dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.0
29. Hot Reload • Primeiro build, executar no celular, AOT; • App rodando, device conectado, fez alguma modificação, JIT.
30. Platform Channels • Utilizados para comunicação com a plataforma Android ou iOS; • Necessário implementar em cada plataforma; • Funciona como um Broadcast, logo é necessário ter cuidado com o identificador; • Ex: Obter o status da bateria, usar o Bluetooth, entre outros.
31. Flutter - Mão na massa
32. Base de um aplicativo import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } }
33. Base de um aplicativo cont. class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text(widget.title),), body: new Center(child: new Text('$_counter',),), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), ); }
34. Exemplos da Comunidade
35. Fluttery https://www.youtube.com/channel/UCtWyVkPpb8An90SNDTNF0Pg
36. Fluttery cont. https://www.youtube.com/channel/UCtWyVkPpb8An90SNDTNF0Pg
37. 2Dimensions https://www.2dimensions.com/b/223-flutter-support
38. Total Suporte do Time do Material Design
39. Material Design Roadmap
40. Material Design Roadmap cont.
41. Material Design Roadmap cont.
43. Links • Site Oficial - https://flutter.io • Dart Oficial - https://www.dartlang.org/ • Tire suas dúvidas - https://flutter.io/faq • What’s revolutionary about Flutter - https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514 • Why Flutter Uses Dart? - https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf • Flutter o que é isso - https://speakerdeck.com/rafaeltoledo/flutter-o-que-e-isso • What’s New in Flutter Beta 3 - https://medium.com/flutter-io/flutter-beta-3-7d88125245dc • Material Components for Flutter - https://material.io/develop/flutter/
44. Flutter, uma alternativa para o desenvolvimento mobile Thiago Santos Android Developer na Caju Tech