1 of 25

Flutter For Developers

.. a Lightning Talk

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

Image Credit: �Giphy

Nitya Narasimhan

May 2018

http://bit.ly/2018-05-flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

2 of 25

Ph.D, Systems Researcher

Focus on Problem-Solving / Persistence.

Polyglot, Software Developer�Focus on Adaptation / Relevance

P.O.C, Community Builder / Speaker�Focus on Representation / Amplification

Parent, Educator / Mentor

Focus on Skills Training / Self-Esteem

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

3 of 25

WindyCity DevFest / Jan 2018

IWD NYC Workshop / Apr 2018

GDGNYC FlutterCamp / Jun 2018

O’Reilly OSCON / Jul 2018

Google Developer Group / NYC

Google Developer Group / Hudson Valley

DevFest NYC / IWDNYC / Study Camps

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

4 of 25

Goals: Let me tell you about Flutter ..

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

5 of 25

Reality: I have 10 minutes .. hang on.

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

6 of 25

What is Flutter?

An open-source UI framework from Google for building performant & customizable native apps for Android & iOS* platforms from one codebase.

​

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

7 of 25

WHAT YOU GET

RAPID PROTOTYPING / HOT RELOAD

​

Image: https://flutter.io/

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

8 of 25

WHAT YOU GET

CUSTOM TRANSITIONS & ANIMATIONS / ONE CODEBASE

​

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

9 of 25

Demo

Time!

#MurphysLaw

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

10 of 25

How do they do that?

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

11 of 25

MVC /

MVVM

REACTIVE

COMPILED

INTERPRETED

Native iOS

& Android

Titanium PhoneGap

Cordova

React Native

Mobile UI Landscape today ..

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

12 of 25

But bridges have tolls ..

JAVASCRIPT

REALM

Your

Mobile App

NATIVE

REALM

Platform Services, Events & Widgets

⇦ Context Switch ⇨

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

13 of 25

How can you make ‘reactive’ performant?

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

14 of 25

REACTIVE FRAMEWORKS ON THE WEB

Compare

Update

Real

DOM

Virtual DOM

Application

Platform

Rende

r

Canvas

Events

Tim Messerschmidt / Google

“The Magic of Flutter”

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

15 of 25

REACTIVE FRAMEWORKS ON MOBILE

Compare

Update

Platform Widgets

Virtual Widgets

Application

Platform

Rende

r

Canvas

Events

Tim Messerschmidt / Google

“The Magic of Flutter”

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

16 of 25

REACTIVE WITH FLUTTER

Widget Tree

Application

Platform

Rende

r

Canvas

Events

No OEM Widgets

​

Compiles to

ARM code

​

​

Structural Repainting

(bit blt)

Tim Messerschmidt / Google

“The Magic of Flutter”

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

17 of 25

But what about that extensibility?

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

18 of 25

Tim Messerschmidt / Google

“The Magic of Flutter”

FLUTTER’S LAYERED ARCHITECTURE

Skia

Dart

Text

Foundation

Animation

Painting

Rendering

Widgets

Material

Gestures

Engine

(C++)

Framework

(Dart)

Cupertino

Dev space

​

customize anything

System Space

​

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

19 of 25

What’s next?

#io18

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

20 of 25

https://codelabs.developers.google.com/io2018?cat=Flutter

Self-Guided Learning

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

21 of 25

https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905

Self-Guided Learning

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

22 of 25

https://www.youtube.com/playlist?list=PL0o58xSX-Jvi6zBDe7SW4W6h5hauQ-xxF

YouTube #IO18 Playlist

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

23 of 25

https://www.meetup.com/gdgnyc/events/244123450/

#FlutterCamp 2018

In planning:

1-day Study Camp going from concepts to code. Monitor the link below for updates.

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

24 of 25

Extensible Framework

Layered Architecture

Fully Open Source

Packages & Channels

Native UI

Performance

Compiled (JIT / AOT)

Reactive Apps

Smooth Motion (60fps)

​

Rich �Tooling

Flutter CLI & IDE

Hot Reload

Firebase Integration

Expressive Design

Reuse & Compose

Material Design Widgets

Cupertino Widgets

1-SLIDE RECAP

Final Takeaways

Slides: http://bit.ly/2018-05-flutter4dev

​

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

25 of 25

Thank You for Listening

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev

Image Credit: �Giphy

Nitya Narasimhan

May 2018

http://bit.ly/2018-05-flutter4dev

@nitya

Ask me about #FlutterCamp

Flutter For Developers | A Lightning Talk

#flutter4dev

@nitya

Flutter For Developers | A Lightning Talk

#sharatogatech #flutter4dev