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

Web Front-End Architectures for Native Mobile Apps

Web Front-End Architectures for Native Mobile Apps

GIDS 2019: https://www.developermarch.com/developersummit/session.html?insert=Raghunath2

Let's face it, the web is a powerhouse of innovation. The pace at which the web is innovating is hard for native mobile app developers to catch up. Its larger developer community is constantly coming up with refreshing ideas and also attaining maturity faster than the native mobile app counterparts. Frameworks and libraries like Redux, React, Cycle.js, Vue.js, etc., have changed the way web apps are built. It's easier for web developers to build predictable apps using any of the technologies listed above.

The mobile ecosystem has been revolving around "traditional" architectures for quite sometime. Adopting ideas from the web on native apps presents some unique challenges. To begin with, the dynamic nature of JavaScript vs. static languages like Java / Kotlin and Swift used to develop native mobile apps. Expectations and user experience on web vs. mobile. Finally, the asynchronous nature of mobile platforms and their lifecycle itself presents some unique challenges.

This talk will guide and encourage native mobile app developers to adopt ideas from some of the popular front-end frameworks on the web and apply them to native app development.

Audience will be able to:
- Evaluate different front-end architectures.
- Embrace patterns and development techniques from web front-end architectures while building native mobile apps.

Ragunath Jawahar

April 25, 2019
Tweet

More Decks by Ragunath Jawahar

Other Decks in Programming

Transcript

  1. Web Front-End Architectures
    for Native Mobile Apps
    Ragunath Jawahar • Obvious (formerly, Uncommon Bangalore)

    @ragunathjawahar / Twitter / GitHub / Medium

    View full-size slide

  2. Insights
    1. UIs are cycles.

    2. UIs are functions.

    3. UIs are asynchronous.

    4. UIs are symmetric.

    5. User is a function.

    View full-size slide

  3. Insights
    1. UIs are cycles.

    2. UIs are functions.

    3. UIs are asynchronous.

    4. UIs are symmetric.

    5. User is a function.

    View full-size slide

  4. Insights
    1. UIs are cycles.

    2. UIs are functions.

    3. UIs are asynchronous.

    4. UIs are symmetric.

    5. User is a function.

    View full-size slide

  5. Insights
    1. UIs are cycles.

    2. UIs are functions.

    3. UIs are asynchronous.

    4. UIs are symmetric.

    5. User is a function.

    View full-size slide

  6. Insights
    1. UIs are cycles.

    2. UIs are functions.

    3. UIs are asynchronous.

    4. UIs are symmetric.

    5. User is a function.

    View full-size slide

  7. Insights
    1. UIs are cycles.

    2. UIs are functions.

    3. UIs are asynchronous.

    4. UIs are symmetric.

    5. User is a function.

    View full-size slide

  8. Inspiration
    React

    Vue

    Flux

    Cycle.js

    MobX

    Redux
    0.3.0

    0.6.0

    2.0.1

    0.1.0

    0.0.1

    0.2.0
    Jul 3, 2013

    Dec 8, 2013

    Sep 22, 2014

    Nov 13, 2014

    Mar 23, 2015

    Jun 2, 2015

    View full-size slide

  9. React

    Vue

    Flux

    Cycle.js

    MobX

    Redux

    View full-size slide

  10. React

    Vue

    Flux

    Cycle.js

    MobX

    Redux
    Reactive

    View full-size slide

  11. React

    Vue

    Flux

    Cycle.js

    MobX

    Redux

    View full-size slide

  12. React

    Vue

    Flux

    Cycle.js

    MobX

    Redux
    Unidirectional

    View full-size slide

  13. React

    Vue

    Flux

    Cycle.js

    MobX

    Redux

    View full-size slide

  14. React

    Vue

    Flux

    Cycle.js

    MobX

    Redux
    Predictable

    View full-size slide

  15. React

    Vue

    Flux

    Cycle.js

    MobX

    Redux

    View full-size slide

  16. React

    Vue

    Flux

    Cycle.js

    MobX

    Redux
    Composable

    View full-size slide

  17. React

    Vue

    Flux

    Cycle.js

    MobX

    Redux
    Composable

    View full-size slide

  18. React

    Vue

    Flux

    Cycle.js

    MobX

    Redux
    Composable

    View full-size slide

  19. Reactive
    Unidirectional
    Predictable
    Composable

    View full-size slide

  20. Reactive
    Unidirectional
    Predictable
    Composable

    View full-size slide

  21. Reactive
    Unidirectional
    Predictable
    Composable

    View full-size slide

  22. Reactive
    Unidirectional
    Predictable
    Composable

    View full-size slide

  23. Reactive
    Unidirectional
    Predictable
    Composable
    Redux

    Cycle.js

    View full-size slide

  24. Reactive
    Unidirectional
    Predictable
    Composable
    Redux

    Model - View - Intent

    View full-size slide

  25. Reactive
    Unidirectional
    Predictable
    Composable
    Redux

    Model - View - Intent

    View full-size slide

  26. Why not MV*?

    View full-size slide

  27. Unidirectional?

    View full-size slide

  28. Unidirectional

    View full-size slide

  29. Predictable?

    View full-size slide

  30. val troubleMakers = mutableListOf()
    for (employee in employees) {
    if (employee.lastName ?@ "Rebel") {
    troubleMakers.add(employee)
    }
    }
    val troubleMakers = employees.filter { it.lastName ?@ "Rebel" }

    View full-size slide

  31. val troubleMakers = mutableListOf()
    for (employee in employees) {
    if (employee.lastName ?@ "Rebel") {
    troubleMakers.add(employee)
    }
    }
    val troubleMakers = employees.filter { it.lastName ?@ "Rebel" }

    View full-size slide

  32. val troubleMakers = mutableListOf()
    for (employee in employees) {
    if (employee.lastName ?@ "Rebel") {
    troubleMakers.add(employee)
    }
    }
    val troubleMakers = employees.filter { it.lastName ?@ "Rebel" }

    View full-size slide

  33. Reactive
    Unidirectional
    Predictable
    Composable
    MV*

    View full-size slide

  34. Adopting to Mobile

    View full-size slide

  35. Design Thinking

    View full-size slide

  36. Understand Explore
    Evaluate Make

    View full-size slide

  37. Understand Explore
    Evaluate Make

    View full-size slide

  38. Understand Explore
    Evaluate Make

    View full-size slide

  39. Understand Explore
    Evaluate Make

    View full-size slide

  40. Understand Explore
    Evaluate Make

    View full-size slide

  41. Understand Explore
    Evaluate Make

    View full-size slide

  42. Port the concept, not the code.

    View full-size slide

  43. @Parcelize
    data class Employee(
    val firstName: String,
    val lastName: String
    ) : Parcelable

    View full-size slide

  44. package in.obvious.payroll.domain;
    import android.os.Parcel;
    import android.os.Parcelable;
    import java.util.Objects;
    public class Employee implements Parcelable {
    private final String firstName;
    private final String lastName;
    public Employee(String firstName, String lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    }
    private Employee(Parcel in) {
    firstName = in.readString();
    lastName = in.readString();
    }
    @Override
    public void writeToParcel(Parcel dest, int flags) {
    dest.writeString(firstName);
    dest.writeString(lastName);
    }
    @Override
    public int describeContents() {
    return 0;
    }
    public static final Creator CREATOR = new Creator() {
    @Override
    public Employee createFromParcel(Parcel in) {
    return new Employee(in);
    }
    @Override
    public Employee[] newArray(int size) {
    return new Employee[size];
    }
    };
    public String getFirstName() {
    return firstName;
    }
    public String getLastName() {
    return lastName;
    }
    public Employee copyFirstName(String firstName) {
    return new Employee(firstName, this.lastName);
    }
    public Employee copyLastName(String lastName) {
    return new Employee(this.firstName, lastName);
    }
    @Override
    public boolean equals(Object o) {
    if (this ?@ o) return true;
    if (o ?@ null || getClass() Z@ o.getClass()) return false;
    Employee employee = (Employee) o;
    return firstName.equals(employee.firstName) &&
    lastName.equals(employee.lastName);
    }
    @Override
    public int hashCode() {
    return Objects.hash(firstName, lastName);
    }
    }
    package `in`.obvious.payroll.domain
    @Parcelize
    data class Employee(
    private val firstName: String,
    private val lastName: String
    ) : Parcelable

    View full-size slide

  45. • Created

    • Restored

    View full-size slide

  46. Product / Business

    View full-size slide

  47. What does Redux / MVI do?

    View full-size slide

  48. 1. Uses a single atomic state as a source of truth.

    2. The SAS is immutable.

    3. All updates to the SAS happens though via actions contain necessary
    data. The business logic is a pure function.

    4. The view listens to state updates.

    5. Async operations are handled at the edge of the system.

    View full-size slide

  49. Mobius
    • Model

    • Event / Event Source

    • Effect

    • Logic

    • Effect Handler

    • View / Renderer

    View full-size slide

  50. 4 days
    2 days
    8 hours

    View full-size slide

  51. 4 days
    2 days
    8 hours

    View full-size slide

  52. 4 days
    2 days
    8 hours

    View full-size slide

  53. 4 days
    2 days
    8 hours

    View full-size slide

  54. 4 days
    2 days
    8 hours

    View full-size slide

  55. end;
    @ragunathjawahar
    Twitter / Medium / GitHub

    View full-size slide