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.

Transcript

1. Web Front-End Architectures for Native Mobile Apps Ragunath Jawahar • Obvious (formerly, Uncommon Bangalore) @ragunathjawahar / Twitter / GitHub / Medium
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
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?
33. Reactive
34. Unidirectional?
37. Unidirectional
38. Predictable?
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?
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
63. • Created • Restored
64. Product / Business
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.
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