Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

All a flutter about Flutter.io

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 63 Anzeige

All a flutter about Flutter.io

Herunterladen, um offline zu lesen

A look at the versatility of flutter.io in speed and creation of highly scalable apps. In particular this presentation also looks at the comparisons between Flutter and React-Native

A look at the versatility of flutter.io in speed and creation of highly scalable apps. In particular this presentation also looks at the comparisons between Flutter and React-Native

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie All a flutter about Flutter.io (20)

Anzeige

Weitere von Steven Cooper (20)

Aktuellste (20)

Anzeige

All a flutter about Flutter.io

  1. 1. All a flutter about Flutter.io Steven Cooper - @DeveloperSteve Developer Evangelist - @TelstraDev Talk #114
  2. 2. @DeveloperSteve Also known as Steven Cooper Seasoned Dev/Ops/CTO /Maker/Geek/Gamer. International Speaker/MC. Hackathon Mentor/Judge. Prev @PayPalDev @XeroAPI
  3. 3. Telstra as a Technology Company
  4. 4. Github.com/telstra
  5. 5. dev.telstra.com TelstraDev portal
  6. 6. TelstraDev growing API Family
  7. 7. Telstra Connected Things APIs
  8. 8. Venture Partner Deals
  9. 9. Right tool for the right job
  10. 10. Digital Agency Challenging and rewarding
  11. 11. Organised Chaos
  12. 12. Dev disruptions
  13. 13. Facebook page tab apps
  14. 14. 25 Words or less apps
  15. 15. Summadayze
  16. 16. Drag and Drop designer
  17. 17. Interactive games
  18. 18. Under da hood
  19. 19. Drag and Drop Yet another 25 words or less app
  20. 20. PhoneGap
  21. 21. Appcelerator
  22. 22. Unity
  23. 23. Best unity project ever
  24. 24. Double Peppers Ghost
  25. 25. CoronaSDK
  26. 26. LUA
  27. 27. My last agency app https://devstev.es/5gum
  28. 28. Flutter.io The new kid on the block
  29. 29. Flutter.io
  30. 30. At a glance • The advantages of reactive views, with no JavaScript bridge • Fast, smooth, and predictable; code compiles AOT to native (ARM) code • The developer has full control over the widgets and layout • Comes with beautiful, customizable widgets • Great developer tools, with amazing hot reload • More performant, more compatibility, more fun
  31. 31. The History
  32. 32. Dart for web
  33. 33. DART vs JS main() { } //Checking for null var myNull = null; if (myNull == null) { print('use "== null" to check null'); } var zero = 0; if (zero == 0) { print('use "== 0" to check zero'); } function main() { // Can be used as entry point } // but it has to be called manually. main(); //Checking for null var myNull = null; if (!myNull) { console.log("null is treated as false"); } var zero = 0; if (!zero) { console.log("0 is treated as false"); }
  34. 34. DART vs JS fn() { return true; } // Async _getIPAddress() { final url = 'https://httpbin.org/ip'; HttpRequest.request(url).then((value) { print(JSON.decode(value.responseText)['origi n']); }).catchError((error) => print(error)); } function fn() { return true; } // Async _getIPAddress = () => { const url="https://httpbin.org/ip"; return fetch(url) .then(response => response.json()) .then(responseJson => { console.log(responseJson.origin); }) .catch(error => { console.error(error); }); };
  35. 35. Everything is a widget
  36. 36. Expressive UI
  37. 37. Virtual Dom Webview React-native Flutter
  38. 38. STATEFUL HOT RELOAD!!! Android and iOS at the same time
  39. 39. Moar features
  40. 40. First App Hello World for reals
  41. 41. Assumptions • iOS and Android are set up at CLI • Android studio installed and is the prod latest ver • Xcode installed and is the prod latest ver • IntelliJ idea is installed • Brew installed the world • NPM installed the world
  42. 42. Setup Flutter Env Clone flutter repo and set path Flutter doctor Update Path
  43. 43. Setup Flutter editor(s) Android Studio TerminalVS • Browse repos • Search for Flutter • Invoke View>Command Palette… • Type ‘install’, and select the ‘Extensions: Install Extension’ action • Enter dart code in the search field, select ‘Dart Code’ in the list, and click Install • Select ‘OK’ to reload VS Code • Flutter create myapp • Cd myapp
  44. 44. Setup React Env Npm install –g react-native-cli
  45. 45. Setup react-native editor(s) Android Studio TerminalVS • Browse repos • Search for react • Install the extension in VS Code: • Press Ctrl + Shift + X (Cmd + Shift + X on macOS), wait a moment while the list of available extensions is populated • Type react-native and install React Native Tools • For more guidance view VS Code Extension Gallery • If you haven't already, install React Native: • Run npm install -g react-native-cli to install React Native CLI • Set up React Native using the steps detailed on the React Native getting started documentation • Open your React Native project root folder in VS Code. • react-native init myapp • Cd myapp
  46. 46. Create and run apps flutter create --org com.test.demo myapp Flutter run -d all react-native init myapp react-native run-ios react-native run-android
  47. 47. Hello World void main() { print('Hello, World!'); } export default class Project extends Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}> Hello World </Text> </View> ); } }
  48. 48. Fancy Hello World import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } }
  49. 49. Mac Air
  50. 50. Demo Time
  51. 51. Counter widget class CounterState extends State<Counter> { int counter = 0; void increment() { setState(() { counter++; }); } Widget build(BuildContext context) { return new Row( children: <Widget>[ new RaisedButton( onPressed: increment, child: new Text('Increment'), ), new Text('Count: $counter'), ], ); } } export default class App extends Component< {}, { count: number } > { state = { count: 0 }; render() { return ( <View style={styles.container}> <Text>{this.state.count}</Text> <Button title="increase" onPress={() => this.setState({ count: this.state.count + 1 })} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#F5FCFF" } }); https://github.com/ThrowJojo/VanillaCounter
  52. 52. Demo Time
  53. 53. In closing
  54. 54. Be ye warned
  55. 55. First Use Case
  56. 56. Recent beta 1 https://devstev.es/flutterbeta
  57. 57. Cross platform vs Native
  58. 58. Further Reading https://devstev.es/ReactFlutter
  59. 59. Further Video-ing https://devstev.es/dartconf18
  60. 60. dev.telstra.com TelstraDev portal
  61. 61. Github.com/telstra SDKs / Code Samples
  62. 62. Thank you Steven Cooper - @DeveloperSteve Developer Evangelist - @TelstraDev

Hinweis der Redaktion

  • World hello
  • The first version of Flutter was known as "Sky" and ran on the Android operating system. It was unveiled at the 2015 Dart developer summit which is good news for recruiters who can ask for a minimum 2 years experience and be safe
  •  Dart is an open-source, scalable programming language for building web, server, and mobile apps. It is an object-oriented, single inheritance language that uses a C-style syntax that is AOT-compiled into native and also transcompiles optionally into JavaScript. It supports interfaces, abstract classes and strong types.
  •  Dart is an open-source, scalable programming language for building web, server, and mobile apps. It is an object-oriented, single inheritance language that uses a C-style syntax that is AOT-compiled into native and also transcompiles optionally into JavaScript. It supports interfaces, abstract classes and strong types.
  • The first version of Flutter was known as "Sky" and ran on the Android operating system. It was unveiled at the 2015 Dart developer summit which is good news for recruiters who can ask for a minimum 2 years experience and be safe
  • with composable widget sets, rich animation libraries, and a layered, extensible architecture but in a way that wont eat the battery
  • Webview - virtual DOM is immutable
    React-native – virtual tree of native widgets
    Flutter – virtual widget tree is now a widget tree
  • World hello
  • Pubspec.yaml is your package.json
  • Demo1 and demo2
  • Demotest and RN-counter
  • World hello
  • Hmilton the official app was built and deployed in 3 months which is really fast for a major app build, Google also uses it for internal facing apps
  • react native / lottie (animations) / mixing native code + react-native together

×