РИТ++ 2017, AppsConf Зал Касабланка, 6 июня, 13:00 Тезисы: http://appsconf.ru/2017/abstracts/2817.html Не так давно Google представил собственное решение для кроссплатформенной разработки, которое выглядит очень интересно. Но стоит ли на него обратить внимание и пробовать использовать? Особенно когда уже есть есть React от Facebook? Как будет работать необходимое вам решение на одной из платформ? В докладе я отвечу на эти и другие вопросы, сравню оба решения по технологическим возможностям с точки зрения нативного Android-разработчика, умеющего смотреть на технологии и с точки зрения бизнеса.

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

7. HOT-RELOADING

8. LAYOUT INSPECTOR

9. Application
ARCHITECTURE – THREADS

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

12. PERFOMANCE PROBLEMS
JS
MAYBE NOYES
NATIVEBRIDGE

13. INTEROPABILITY
REALLY GOOD
HTTPS://JS.COACH/REACT-NATIVE
1150+ IN
REPO
NETWORK THROW FETCH API(XMLHTTPREQUEST API)
OR WEBSOCKET
ASYNC / AWAIT

14. PROPS
INTEROPABILITY
PORTABILITY
DEVELOPMENT PRODUCTIVITY
SIMPLE
TOOLS

15. CONS
JAVASCRIPT
TOOLS STABILITY
THEORETICAL PERFOMANCE

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() {

18. ASYNC
STREAMS
SINGLE-SUBSCRIPTION
BROADCAST STREAMS
FUTURE

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

22. GRAPHICS
PIPELINE
Vsync

23. RENDERING
PIPELINE
Vsync

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

27. CONS
DART
COMMUNITY
INTEROP
TOOLS

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. ИТОГО
ОБЕ ТЕХНОЛОГИИ ДОСТОЙНЫ ВНИМАНИЯ
ОЦЕНИТЕ ЧТО ПОДОЙДЕТ ВАМ ЛУЧШЕ
ОБЕ ТЕХНОЛОГИИ НЕ ЯВЛЯЮТСЯ «СЕРЕБРЯННОЙ ПУЛЕЙ»

31. ENJOY
alexander.smirnov@splyt.com
@_smred
@smred