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.

A8ee6ea52b89dfa1388b592a260c60a6?s=128

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
  2. None
  3. None
  4. Insights 1. UIs are cycles. 2. UIs are functions. 3.

    UIs are asynchronous. 4. UIs are symmetric. 5. User is a function.
  5. Insights 1. UIs are cycles. 2. UIs are functions. 3.

    UIs are asynchronous. 4. UIs are symmetric. 5. User is a function.
  6. Insights 1. UIs are cycles. 2. UIs are functions. 3.

    UIs are asynchronous. 4. UIs are symmetric. 5. User is a function.
  7. Insights 1. UIs are cycles. 2. UIs are functions. 3.

    UIs are asynchronous. 4. UIs are symmetric. 5. User is a function.
  8. Insights 1. UIs are cycles. 2. UIs are functions. 3.

    UIs are asynchronous. 4. UIs are symmetric. 5. User is a function.
  9. Insights 1. UIs are cycles. 2. UIs are functions. 3.

    UIs are asynchronous. 4. UIs are symmetric. 5. User is a function.
  10. 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
  11. React Vue Flux Cycle.js MobX Redux

  12. React Vue Flux Cycle.js MobX Redux Reactive

  13. React Vue Flux Cycle.js MobX Redux

  14. React Vue Flux Cycle.js MobX Redux Unidirectional

  15. React Vue Flux Cycle.js MobX Redux

  16. React Vue Flux Cycle.js MobX Redux Predictable

  17. React Vue Flux Cycle.js MobX Redux

  18. React Vue Flux Cycle.js MobX Redux Composable

  19. React Vue Flux Cycle.js MobX Redux Composable

  20. React Vue Flux Cycle.js MobX Redux Composable

  21. None
  22. Reactive Unidirectional Predictable Composable

  23. Reactive Unidirectional Predictable Composable

  24. Reactive Unidirectional Predictable Composable

  25. Reactive Unidirectional Predictable Composable

  26. Reactive Unidirectional Predictable Composable Redux Cycle.js

  27. Reactive Unidirectional Predictable Composable Redux Model - View - Intent

  28. Reactive Unidirectional Predictable Composable Redux Model - View - Intent

  29. Why not MV*?

  30. Reactive?

  31. None
  32. None
  33. Reactive

  34. Unidirectional?

  35. None
  36. None
  37. Unidirectional

  38. Predictable?

  39. None
  40. None
  41. val troubleMakers = mutableListOf<Employee>() for (employee in employees) { if

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

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

    (employee.lastName ?@ "Rebel") { troubleMakers.add(employee) } } val troubleMakers = employees.filter { it.lastName ?@ "Rebel" }
  44. Predictable

  45. Composable?

  46. None
  47. Composable

  48. Reactive Unidirectional Predictable Composable MV*

  49. Adopting to Mobile

  50. Design Thinking

  51. Understand Explore Evaluate Make

  52. Understand Explore Evaluate Make

  53. Understand Explore Evaluate Make

  54. Understand Explore Evaluate Make

  55. Understand Explore Evaluate Make

  56. Understand Explore Evaluate Make

  57. Port the concept, not the code.

  58. Language

  59. @Parcelize data class Employee( val firstName: String, val lastName: String

    ) : Parcelable
  60. 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<Employee> CREATOR = new Creator<Employee>() { @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
  61. Platform

  62. None
  63. • Created • Restored

  64. Product / Business

  65. None
  66. What does Redux / MVI do?

  67. 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.
  68. None
  69. None
  70. Mobius • Model • Event / Event Source • Effect

    • Logic • Effect Handler • View / Renderer
  71. 4 days 2 days 8 hours

  72. 4 days 2 days 8 hours

  73. 4 days 2 days 8 hours

  74. 4 days 2 days 8 hours

  75. 4 days 2 days 8 hours

  76. end; @ragunathjawahar Twitter / Medium / GitHub