Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Comparing multi-platform mobile frameworks

Comparing multi-platform mobile frameworks

In the context of introducing Flutter to the audience, this presentation compares the major players in the cross-platform or multi-platform mobile frameworks.

Andrei Diaconu

May 10, 2019
Tweet

More Decks by Andrei Diaconu

Other Decks in Programming

Transcript

  1. Mobile UI
    Native, we need to talk…

    View full-size slide

  2. Code sharing
    Native knowledge
    Native-friendly
    Easy Team
    MVP
    Production
    Speed
    Quality

    View full-size slide

  3. Code sharing
    Native knowledge
    Native-friendly
    Easy Team
    MVP
    Production
    Speed
    Quality

    View full-size slide

  4. • Humans: more devs, more projects, more overhead, less
    cohesion

    • Native views are rigid and there are cases where this is
    creatively a deal breaker

    • Fragmentation still an issue for Android. Just consider
    Camera.

    View full-size slide

  5. JS
    HTML + CSS
    JS / C#
    Native View
    Own Renderer

    View full-size slide

  6. Code sharing
    Native knowledge
    Native-friendly
    Easy Team
    MVP
    Production
    Speed
    Quality

    View full-size slide

  7. JS
    DOM
    OpenGL
    OpenGL
    OpenGL
    OpenGL
    OpenGL
    Bridge
    DIV
    CSS
    DIV
    IMAGE
    DIV
    WebView

    View full-size slide

  8. • Native devs / Native View account for a lot of the look
    and feel

    • Performance still an issue

    • "Native for free" - But you get what you pay for

    View full-size slide

  9. Code sharing
    Native knowledge
    Native-friendly
    Easy Team
    MVP
    Production
    Speed
    Quality
    *For a simple app
    *

    View full-size slide

  10. OpenGL
    OpenGL
    OpenGL
    OpenGL
    OpenGL
    JS VDOM
    Native
    View 1
    Native
    View 2
    Native
    View 3
    Native
    View 4
    Native
    View 5
    Bridge

    View full-size slide

  11. JS VDOM
    Native
    View 1
    Native
    View 2
    Native
    View 3
    Native
    View 4
    Native
    View 5
    Bridge
    My View
    1
    MyView
    2
    My View
    3
    My View
    4
    My View
    5

    View full-size slide

  12. Code sharing
    Native knowledge
    Native-friendly
    Easy Team
    MVP
    Production
    Speed
    Quality
    *For complex UI
    *

    View full-size slide

  13. Code sharing
    Native knowledge
    Native-friendly
    Easy Team
    MVP
    Production
    Speed
    Quality

    View full-size slide

  14. OpenGL
    OpenGL
    OpenGL
    OpenGL
    OpenGL
    DART VDOM
    Native
    OpenGL
    Camera
    Widget
    Widget
    State
    Widget
    Widget
    C++

    View full-size slide

  15. Flutter is fun.
    And better than Android or iOS development in a 1-1
    comparison. The multi-platform bit is a bonus.

    View full-size slide

  16. Which is more
    difficult?
    Business logic vs UI

    View full-size slide

  17. Where do you spend
    your time?
    Business logic vs UI

    View full-size slide

  18. What devs do I have?

    View full-size slide

  19. “Google kills projects.
    No thanks.”
    Elephant in the room

    View full-size slide

  20. Can I isolate native
    specific code?
    Chances are there's a library out there

    View full-size slide

  21. HTML + CSS
    • Special power: “Native for free”

    • Code reuse is the best here (web is also sharing code)

    • No more native views type of problems

    • Can better leverage a web team

    • Good for MVP in many cases. Not so good after that
    for most

    • Great speed. Amazing opportunity for a web team
    • Quality is usually the trade-off

    • Humans: Native devs account for some of the native look
    and feel

    • Platform: Native rigidity accounts for a lot of look and feel

    • Web-first mentality skews certain design and behavior
    decisions

    • Performance still an issue on some devices

    • "Native for free" - You get what you pay for

    View full-size slide

  22. Native views
    • Special power: Great native for simple apps

    • Business logic is mostly the only thing shared

    • Opportunities

    • Build around C# or Js as a company

    • Great for MVP and even better: MLP

    • High quality and Speed is decent (still have
    to deal with platform BS)

    • React Native has a superb community with
    tons of ready-made stuff
    • UI work is still (pretty much) platform
    specific

    • Requires deep native knowledge

    • Limits of the native views apply (and
    platforms now share these limits)

    • Trading some issues for others

    • Limits of the base framework apply (js
    bridge still a bottleneck for animations)

    • I consider learning iOS and Android harder
    and worse to learn than a new language

    View full-size slide

  23. Own renderer (Flutter)
    • Special power: OpenGL power.

    • Code reuse is very good. Not as good as
    html+css, yet

    • Good for MVP and many milestones beyond

    • Quality is native-like with freedom for
    complex UI

    • More powerful than native, Faster than RN

    • Closest to designers. Can actually code
    with a designer (peer programming)
    • Worst in terms of existing knowledge in
    your company,

    • But easiest to learn in my opinion

    • Native knowledge is not needed

    • Building a team is fast and cheap (can
    convert mostly anyone, although front-
    end people are the way to go)

    View full-size slide