Flutter vs React: взгляд нативщика / Александр Смирнов (Splyt)
Download as PPTX, PDF0 likes488 views
The document compares Flutter and React Native, highlighting their strengths and weaknesses in areas such as user interface design, development productivity, and performance. It discusses technical aspects, including architecture, interoperability, and tools available for each framework. The conclusion suggests that both technologies are worthy of consideration, depending on specific project needs and circumstances.
![UI
var container = new Container( // gray box
child: new Center(
child: new Transform(
child: new Container( // red box
child: new Text(
"Lorem ipsum",
style: new TextStyle(
fontSize: 24.0
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
textAlign: TextAlign.center,
),
decoration: new BoxDecoration(
color: Colors.red[400],
),
padding: new EdgeInsets.all(16.0),
),
alignment: FractionalOffset.center,
transform: new Matrix4.identity()
..rotateZ(15 * 3.1415927 / 180),
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
FLEX
CSS BY TEXTSTYLE
ASSETS
OWN ANIMATION FRAMEWORK
DECLARATIVE](https://image.slidesharecdn.com/3fluttervsreactsplyt4-170628230033/85/Flutter-vs-React-Splyt-21-320.jpg)
Flutter vs React: взгляд нативщика / Александр Смирнов (Splyt)
- 1. FLUTTER VS REACT: ВЗГЛЯД НАТ ALEXANDER SMIRNOV 06.06.2017
- 2. WHOAMI ANDROID DEVELOPER SINCE 2012 ANDROID В ЛИЦАХ (YOUTUBE – TELEGRAM) WORKING IN SPLYT MOSDROID
- 3. LET’S GO
- 5. UI
- 6. UI import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class AlignItemsBasics extends Component { render() { return ( <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics); FLEX CSS-LIKE POLYFILLS ASSETS JSX DECLARATIVE
- 10. ARCHITECTURE JS NATIVE JSCore SingleThread UI Thread BG Threads BRIDGE
- 11. DEVELOPER EXPIRIENCE JS JavaScript Only JS Bundle Business Logic ObjC / Java The Framework NATIVEBRIDGE
- 13. INTEROPABILITY REALLY GOOD HTTPS://JS.COACH/REACT-NATIVE 1150+ IN REPO NETWORK THROW FETCH API(XMLHTTPREQUEST API) OR WEBSOCKET ASYNC / AWAIT
- 17. DART int gear; Bicycle(this.cadence, this._speed, this.gear); int get speed => _speed; void applyBrake(int decrement) { _speed -= decrement; } void speedUp(int increment) { _speed += increment; } @override String toString() => 'Bicycle: $_speed mph'; } main() {
- 19. ISOLATES
- 20. UI
- 21. UI var container = new Container( // gray box child: new Center( child: new Transform( child: new Container( // red box child: new Text( "Lorem ipsum", style: new TextStyle( fontSize: 24.0 fontWeight: FontWeight.w900, fontFamily: "Georgia", ), textAlign: TextAlign.center, ), decoration: new BoxDecoration( color: Colors.red[400], ), padding: new EdgeInsets.all(16.0), ), alignment: FractionalOffset.center, transform: new Matrix4.identity() ..rotateZ(15 * 3.1415927 / 180), ), ), width: 320.0, height: 240.0, color: Colors.grey[300], ); FLEX CSS BY TEXTSTYLE ASSETS OWN ANIMATION FRAMEWORK DECLARATIVE
- 25. INTEROPABILITY BY PLUGIN SYSTEM HTTPS://PUB.DARTLANG.ORG 2600+ IN REPO NETWORK THROW HTTP(S) OR WEBSOCKET
- 26. PROPS FPS COUNT PORTABILITY DEVELOPMENT PRODUCTIVITY RUNTIME PRODUCTIVITY
- 28. BUSINESS
- 29. QUESTIONS TO ANSWER CAN WE ADD NEW FUNCTIONALITY FAST? IT IS EASY TO ONBOARD NEW PEOPLE? IS OUR CODEBASE PREPARE TO SCALE? IT IS HARD TO MAINTAIN? ANY ALTERNATIVES?
- 30. ИТОГО ОБЕ ТЕХНОЛОГИИ ДОСТОЙНЫ ВНИМАНИЯ ОЦЕНИТЕ ЧТО ПОДОЙДЕТ ВАМ ЛУЧШЕ ОБЕ ТЕХНОЛОГИИ НЕ ЯВЛЯЮТСЯ «СЕРЕБРЯННОЙ ПУЛЕЙ»