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
   

   View Slide

2. View Slide

3. View 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 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 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 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 Slide

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

   View Slide

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

   View Slide

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
    

    View Slide

11. React
    
    Vue
    
    Flux
    
    Cycle.js
    
    MobX
    
    Redux
    

    View Slide

12. React
    
    Vue
    
    Flux
    
    Cycle.js
    
    MobX
    
    Redux
    Reactive
    

    View Slide

13. React
    
    Vue
    
    Flux
    
    Cycle.js
    
    MobX
    
    Redux
    

    View Slide

14. React
    
    Vue
    
    Flux
    
    Cycle.js
    
    MobX
    
    Redux
    Unidirectional
    

    View Slide

15. React
    
    Vue
    
    Flux
    
    Cycle.js
    
    MobX
    
    Redux
    

    View Slide

16. React
    
    Vue
    
    Flux
    
    Cycle.js
    
    MobX
    
    Redux
    Predictable
    

    View Slide

17. React
    
    Vue
    
    Flux
    
    Cycle.js
    
    MobX
    
    Redux
    

    View Slide

18. React
    
    Vue
    
    Flux
    
    Cycle.js
    
    MobX
    
    Redux
    Composable
    

    View Slide

19. React
    
    Vue
    
    Flux
    
    Cycle.js
    
    MobX
    
    Redux
    Composable
    

    View Slide

20. React
    
    Vue
    
    Flux
    
    Cycle.js
    
    MobX
    
    Redux
    Composable
    

    View Slide

21. View Slide

22. Reactive
    Unidirectional
    Predictable
    Composable
    

    View Slide

23. Reactive
    Unidirectional
    Predictable
    Composable
    

    View Slide

24. Reactive
    Unidirectional
    Predictable
    Composable
    

    View Slide

25. Reactive
    Unidirectional
    Predictable
    Composable
    

    View Slide

26. Reactive
    Unidirectional
    Predictable
    Composable
    Redux
    
    Cycle.js
    

    View Slide

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

    View Slide

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

    View Slide

29. Why not MV*?
    

    View Slide

30. Reactive?
    

    View Slide

31. View Slide

32. View Slide

33. Reactive
    

    View Slide

34. Unidirectional?
    

    View Slide

35. View Slide

36. View Slide

37. Unidirectional
    

    View Slide

38. Predictable?
    

    View Slide

39. View Slide

40. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. Predictable
    

    View Slide

45. Composable?
    

    View Slide

46. View Slide

47. Composable
    

    View Slide

48. Reactive
    Unidirectional
    Predictable
    Composable
    MV*
    

    View Slide

49. Adopting to Mobile
    

    View Slide

50. Design Thinking
    

    View Slide

51. Understand Explore
    Evaluate Make
    

    View Slide

52. Understand Explore
    Evaluate Make
    

    View Slide

53. Understand Explore
    Evaluate Make
    

    View Slide

54. Understand Explore
    Evaluate Make
    

    View Slide

55. Understand Explore
    Evaluate Make
    

    View Slide

56. Understand Explore
    Evaluate Make
    

    View Slide

57. Port the concept, not the code.
    

    View Slide

58. Language
    

    View Slide

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

    View Slide

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 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 Slide

61. Platform
    

    View Slide

62. View Slide

63. • Created
    
    • Restored
    

    View Slide

64. Product / Business
    

    View Slide

65. View Slide

66. What does Redux / MVI do?
    

    View Slide

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.
    

    View Slide

68. View Slide

69. View Slide

70. Mobius
    • Model
    
    • Event / Event Source
    
    • Effect
    
    • Logic
    
    • Effect Handler
    
    • View / Renderer
    

    View Slide

71. 4 days
    2 days
    8 hours
    

    View Slide

72. 4 days
    2 days
    8 hours
    

    View Slide

73. 4 days
    2 days
    8 hours
    

    View Slide

74. 4 days
    2 days
    8 hours
    

    View Slide

75. 4 days
    2 days
    8 hours
    

    View Slide

76. end;
    @ragunathjawahar
    Twitter / Medium / GitHub
    

    View Slide