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

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

    UIs are asynchronous. 4. UIs are symmetric. 5. User is a function.
  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. 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
  9. val troubleMakers = mutableListOf<Employee>() for (employee in employees) { if

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

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

    (employee.lastName ?@ "Rebel") { troubleMakers.add(employee) } } val troubleMakers = employees.filter { it.lastName ?@ "Rebel" }
  12. 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
  13. 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.
  14. Mobius • Model • Event / Event Source • Effect

    • Logic • Effect Handler • View / Renderer