DEV Community: Vipul

The Curious case of res.render

Vipul — Wed, 29 Dec 2021 15:06:26 +0000

If you have ever tried to build a website, chances are you have encountered res.render.

If you program in PHP (Laravel), you know it as view.

Route::get('/', function () {
  return view("home");
});

If you are coming from the land of Ruby on Rails, you know it as render.

def index
  render "home"
end

If you like yourself some ExpressJS(Node), you may know it in the form we are addressing it, the infamous res.render.

app.get("/", function (req, res) {
  res.render("home");
});

Despite being a creature of the multiverse, and existing in so many forms, it has a relatively simple definition.

res.render is a function that takes one argument, some sort of name, which represents some static content, for our concerns, HTML, and sends back that as response to client requests.

What's so curious about it?

When I was thinking about adding template rendering support in NRAF, a very interesting question popped up.

How would I, as a library author, know where does the template exist in the user's project? Sure, I can ask them to tell me an absolute path to that file, but other frameworks like Express support defaults without asking the user to provide any.

And so I wondered,

How do they even know where are the files ??, are they somehow finding the absolute path of the file, which call the render function and thus find the path to root of the project. But, how the hell do you find the path of a file that calls a function ??

And I had seen them all, the Pledge, the Turn and the Prestige, accepted the magic trick got me. And started looking for clues on what made it tick.

The road called "Obvious"

As my first instinct was to somehow find the path of the file which called render, I started by googling "how to find the path of a file which called some function", which to my surprise let to some legit information.

While this is "a way" of hacking together a solution, this just didn't seem right. This would be extremely bad for performance, and shouts HACK-IST from a distance. Moreover, it just didn't feel right, so I decided to dive into ExpressJS source code and find how they are doing it.

P.S: Thank you open source.

Finding the secret sauce

In the super early days of NRAF development, I often referred to Express source code for "inspiration", "validation of my ideas" and sometimes just pure learning. With that, I had some prior experience and familiarity with the source code which helped in finding things quickly.

The good thing with the source code of Express is, it's not huge and overly complicated by fancy build tools, so it's approachable to people of all experience levels.

I initially started by looking at what default settings which are used when you initialised an app.

app.defaultConfiguration = function defaultConfiguration() {
  var env = process.env.NODE_ENV || 'development';

  // default settings
  this.enable('x-powered-by');
  this.set('etag', 'weak');
  this.set('env', env);
  this.set('query parser', 'extended');
  this.set('subdomain offset', 2);
  this.set('trust proxy', false);

  ...
  ...

  // default configuration
  this.set('view', View);
  this.set('views', resolve('views'));

  ...
  ...

};

Notice the call to this.set('views', resolve('views'));

This function is responsible for telling Express, where it will find the templates, so I expected the second argument to be some sort a path, but it's a call to the resolve function.

This means, the resolve function is responsible for finding the path to folder, where we will find the templates. Below is the definition of resolve function.

View.prototype.resolve = function resolve(dir, file) {
  var ext = this.ext;

  // <path>.<ext>
  var path = join(dir, file);
  var stat = tryStat(path);

  if (stat && stat.isFile()) {
    return path;
  }

  // <path>/index.<ext>
  path = join(dir, basename(file, ext), "index" + ext);
  stat = tryStat(path);

  if (stat && stat.isFile()) {
    return path;
  }
};

What, how, wait, huh !!

I expected this function to do something related to finding the views folder, but it's doing nothing like that. It just checks if the given path is a file or a directory and accordingly return a new path, joining the two.

This was strange, and at this point I got really confused, I expected to see something very clear on how they location the absolute path of your project, but it seems like they don't set it explicitly and just magically know somehow.

After that, I was just browsing through files in the project, to find some more hints on how to find the path, when I noticed the lookup function.

View.prototype.lookup = function lookup(name) {
  var path;
  var roots = [].concat(this.root);

  debug('lookup "%s"', name);

  for (var i = 0; i < roots.length && !path; i++) {
    var root = roots[i];

    // resolve the path
    var loc = resolve(root, name);
    var dir = dirname(loc);
    var file = basename(loc);

    // resolve the file
    path = this.resolve(dir, file);
  }

  return path;
};

I figured this was something important, but didn't understand what it was doing precisely. I was about to start putting in some break points in the function definition, when I suddenly noticed, the variable roots. That gave an idea on what this function might be doing, so I quickly opened up my terminal and started bootstrapping a small project to experiment and validate the idea.

cd /tmp
mkdir express-experiment
cd express-experiment
yarn init -y
yarn add express ejs
vim index.js

At this point I had an Express project initialised, then I created an endpoint to test the hypothesis.

const express = require("express");
const app = express();
const PORT = 3000;

app.get("/", (req, res) => {
  res.render("home");
});

app.listen(PORT);

What this should do is, use the defaults and look for a folder called views in my project and render a file called home.ejs.

But there is no views folder in the project folder.

node_modules/
  > express

index.js

I though what if, I add a views folder outside my project.

cd ..
mkdir views
cd views
vim hello.ejs

and added a hello.ejs like in it.

<h1>Hello World from Views outside the project folder</h1>

After which I started the Express server

cd express-experiment
node index.js

and opened http://localhost:3000 in the browser, and there it was, just as I had expected. An ERROR, precisely the one I expected.

So, what just happened?

Well people, we found what makes the magic trick tick, and it's so clever, I am still giggling about it, but yet so obvious, I feel a little dumb I didn't see it before.

So, how does Express know, where to find your views folder. Well, it doesn't know, but it knows all the possible places it might be at.

The smart people who wrote the Express framework, noticed a key detail about how your dependencies are stored inside your projects. The node_modules folder is part of the project itself, which means any dependencies you install, will be installed as a subfolder in your project, which in-turn means, this views folder that we are looking for has to be somewhere in this chain.

And that's exactly what they do, they removed each level of depth from the absolute path, and look for this folder called views and whenever they find it, BINGO.

I genuinely laughed for five minutes straights after I saw that error, only the few rare times I laughed after seeing an error :p (>_<)

How I am going to implement it in NRAF

While I liked how they did it, it also made me think about how this for one can cause a lot of confusion, if not any security issues.

Imagine a situation where you have some folder structure like this.

learning/
  views/
    home.ejs
  coding/
    express-practice/
      index.js

I know it's a bit of a stretched of imagination, but in this case, if you forget to add a views folder to your project, it will starts rending files from the views folder, some level higher up the path, which might end up causing a lot of confusion and become a frustrating problem.

The probability of this happening to someone who is just starting is very realistic, and so to avoid all this, NRAF will require you to tell the path of your template folder explicitly, which is optional in Express.

We will use a syntax similar to how you can do it in Express, using app.set('views', path.join(__dirname, 'views'));, but would be a mandatory thing to do, and if you forget, it will show you a nice error message telling you what you need to do :p

And that's about it, thank you so much for reading my brain dump. Hope it wasn't all blabbering.

If you wanna talk about anything, open an issue, or leave a star on NRAF, maybe :)

Haskell 101: A glance

Vipul — Sat, 13 Nov 2021 05:42:05 +0000

Introduction

A general-purpose, statically typed, purely functional, lazy evaluated programming language, that will hurt you more than your first breakup(no exaggeration).

A language that will make you feel like a noob, doesn't matter how many years of experience you have writing lame JAVA code.

Born out of the complexities of Lambda Calculus and Category Theory, in the dark valleys of Glasgow, Haskell nerds will make sure you leave that book after the preface and never come back because you realize, you are too dumb for this shit.

A language so gorgeous, you will fall in love. A language so powerful, it will make your brain bigger(like physically bigger). A language so sick, even I don't understand half of it(but the other half, that's some kick-ass stuff).

`Step[0]`

If you plan to try some of the examples, I would highly recommend setting up Haskell locally on your machine. You can follow this guide to download and set up ghc and ghci, we will use ghci for all examples.

Can't I just use an online compiler ??

Well, in theory sure, if you google, you can find some options, I have used Haskell replit in the past, but(and "a big fat but, as far as but's go") there is a problem, you see currently you are a Haskell baby, all you know is and do is cry, but these REPL environments are designed for grownups. And if I were to take you from a baby to grownup, we will have to talk about, what purely functional really means, and how IO is always impure by design, and then I will have to tell you about how Haskell ended up going around that issue using IO Monad, but then you will ask what a Monad is, and then I will say, "whatever you want it to be" while simultaneously being something "no one really understands, we all just pretend" and then we will have to talk about "that thing" and then "that other thing" and after a while, we reach stuff, even I don't understand and by then you will have a serious headache and man oh man, a serious headache can cause permanent brain damage to a baby, so no I ain't taking that risk, just set up the f**king thing on your machine locally.

A quick overview

`Haskell` is `general-purpose`

Can be used to build applications of all sorts, there is no specific domain for which the language was designed. DSLs(Domain Specific Languages) like SQL are examples of some languages which were designed to only solve problems of a smaller, restrictive use-case, but there is nothing like that in Haskell.

Also randomly, -- in Haskell is a single-line comment, while {--} create multiline comments.

-- This is a single line comment

{-
I am
multiline comment
-}

`Haskell` is `purely functional`

which implies functions can't have side-effects or think of them as more like functions in Mathematics, they take an input and produce an output. You can apply rules which govern what can be a possible input and what can be a possible output, just like in maths referring to the Domain and Range of a function, and for any given input, the function will produce the same output always.

There are no classes, objects, references, pointers, mutable variables, none of that and so almost all you know as an OOPS btch goes out of the window.

function syntax in Haskell is easy, let's see a few examples

-- Function called `addTwoNumbers` takes two numbers and returns the result of the addition.
addTwoNumbers a b = a + b

-- Function called `multiplyTwoNumbers` takes two numbers and returns the result of multiplication.
multiplyTwoNumbers a b = a * b

Hope that gave you a bit of intuition, I know it wasn't much but I don't think this can be taught in a flyby overview writeup, so I recommend reading here.

`Haskell` is `statically typed`

You can specify types for things in Haskell, but its kinds optional, till you have that case where it isn't, but very rare to have that case. This optional behaviour is thanks to Haskell's type inference system, which is chef's kiss.

let's look at some examples

-- You can add types to constants
intTypeValuesOnly :: Int
intTypeValuesOnly = 10    -- (ok)
intTypeValuesOnly = 6.212 -- (bad, gives error, see image below)

-- You can add types to functions
addTwoInts :: Int -> Int -> Int
addTwoInts a b = a + b

addTwoInts 10 20  -- 30
addTwoInts 5.2 10 -- error similar to the example above.

Hope that all was pretty straightforward, if you wanna learn more about the available types, you can read at http://learnyouahaskell.com/types-and-typeclasses.

`Haskell` has `lazy evaluation`

This one is interesting and a key differentiating factor between Haskell and some of the other functional programming languages. Lazy evaluation means Haskell won't execute some code until it needs to use its output, say for printing it to the stdout or something.

At first glance, this might seem like it, it has no good use-case, but in some scenarios, laziness can come in handy and that's why several programming languages like Ruby have added support for laziness.

for example, if you want to write a function that calculates the sum of the first N natural numbers, it will look something like this.

function findSum(n) {
  let sum = 0;
  for (let x = 1; x <= n; x++) sum = sum + x;
  return sum;
}

here is how you can implement the same thing in Haskell.

findSum :: Int -> Int
findSum num = sum $ take num [1..]

What's happening here is, we are creating an Infinite list, using the range syntax, [1..], if you wanted to create a list of the first 6 natural numbers, you can just say [1..6] and since in our case we haven't specified any upper bound, the list keeps increasing Infinitely and laziness ensures the program does go crazy.

Next, we use the take function to take the first n number of items out of a list. For example, take 3 [1, 2, 3, 4, 5] will result in [1, 2, 3], then we use another built-in function called sum, which sums up all elements in a list. Combine all these and you have yourself a clean one-line implementation, now tell me that ain't pretty.

Laziness isn't just limited to creating infinite collections, but it turn out, its great for compiler optimizations as well. laziness gives Haskell compilers the power of arbritrary restructuring code at compilation time, very cool 😛😛.

And that's about it I guess 😅😅😅

Programming Languages - A comparison with Human Languages

Vipul — Tue, 25 May 2021 09:14:34 +0000

Disclaimer

This mess is a lighthearted read, and uses the F word once, with some other weird stuff, so if you are sensitive about that sort of thing, I am sorry and these are just jokes. Enjoy the read and hey, if you like some of the jokes, I go by @vipulbhj on Twitter and I don't hate compliments :p.

P.S: Wait, does anyone hate compliments, DM me if you do, I am curious and also I love you and being different is awesome.

Programming Languages

I recently encountered this tweet where the user was curious on how programming languages compare to the other more familiar human languages. This reminded me of all times when I wondered if programming in Hindi will it make my code safer, since non Hindi speakers wouldn't be able to read my code :p

So in this blog(blabbering session), I will try to deep dive(to anxious overthinking depth levels) into this subject. So, let's go....

What is language

According to Wikipedia, Language is ummm.. you know what, forget this. You are reading this just fine, fair enough that proves you know what a language is, no mansplaining here, this is a safe space, or is it (EVIL LAUGH)

Yeah so whatever, back to the subject. So, since you already know what a language is, you also know it has some components, let's talk about those.

Components of Language

Although, based on the perspective and the research you are looking at, googling for components of language will give you a lot of results, but it all essentially boils down to,

Letters -> atomic core of the language, finite and unchanging.
Words -> first layer of abstraction, ordered combination of letters which have a specific meaning(I have no clue how this works, but somehow the whole fk world just accepts, okay this combination means this, like how, seriously, what's the process of formally expressing denial here) and rhyme(lets face it, pronunciation is a lame word), over time new words can be are added and rarely old ones are removed, but trends change, thing become uncool and and people stop using it by choice.
Sentences -> second layer of abstraction, introduces the concept of Grammar.

And using these, I could blabber all the things you just read(sorry, not sorry).

What is Programming Language

Who wants to ask Wikipedia, yup no one, just as I figured.

So, programming language allow humans to communicate with computers, and control them and feel like Mojo Jojo, by making the most awesome evil plan ever to destroy the Powerpuff Girls

Yup you can do that, and it's freaking awesome, but also don't, like just don't. And moreover, you already know what a programming language is, else what are you doing here, huh, huh, no tell me NO.

Btw fun fact, programming languages don't have a notion of Time, Emotion, etc. So the code you write in Java, or Python or something else may feel like it has something to do the English language, but actually has no connection at all. They just share the same character set and that was also just because where these was initially developed.

Programming languages provide support for arbitrary text. For example, say a document is written in Spanish, and contains a paragraph written in English. Now if a given individual, who has no clue what English looks like, reads that text, to the reader the english bits mean nothing and they will simply just ignore them and move to the bits they can read.

Now most human languages don't define rules of intermixing of languages, since this is not something they expect the user to be doing and even when it's done, it relies on the consumers understanding of various languages.

But we frequently use arbitrary text while programming and that raises a problem, how do we know which bits are part of the language and which bits are just strings(arbitrary text to be ignored). And to avoid this confusion, each languages defines it's own special way to make something a string.

Let's look at the Javascript code below,

console.log("Hello World"); 
// prints 'hello world' on the console screen

In Javascript, everything inside double quotes is treated as a string, so apart from the Hello World, everything is part of the language, even the double quotes, YES the double quotes is not part of the arbitrary text, but part of the Javascript language.

Components of Programming Language

In general the notion of letters doesn't exist in programming languages. If the character set used (ASCII, UTF-*, etc) supports the symbol, then it's valid and acceptable.

Most programming languages start from keywords, which is an ordered collection of symbols with a specific meaning(a.k.a word in human language). These are finite in number and don't change for a specific version of the language. Keywords are things like if, else, for, while, let, const, etc.

The notion of grammar is mostly similar to any other language, defining rules of keyword usage.

So can you code in any Language ??

Most definitely yes. At the end of the day, computers only understand assembly language, which are direct instructions your CPU understands. The only problem with writing Assembly directly is, it's not a great experience and an overkill for almost 99.99% cases, but hey if you think you like it, write Assembly, and make those Powerpuff Girls suffer (EVIL LAUGH).

But wait, how does Python work then. Well you already know compiler and interpreter right, yeah that's it. Python uses a compiler to convert your code to binary and that shit feels like magic.

But also, did you know, your could program with spaces and tabs, or even better with emoji.

HELLO ERRORS MY OLD FRIEND

Vipul — Thu, 22 Oct 2020 05:00:51 +0000

Errors get a bad rep in the newborn #devjokes lingo, which is just a few years old at this point. Btw did you notice when words like programming, algorithm, software, and AI became part of the everyday expression 🤭🤭, extra points to the person who can tell the catalyst of this reaction 😛😛?

Anyways, my point is errors are not bad at all.
I would even go as far as saying errors are great, they are like that friend who tells you his honest opinion and notifies you when you do something wrong.

Enough babbling, let's look at an example.

const TASKS = ["Task 1", "Task 2", "Task 3", "Task 4"];
function getNextTask(currentTask) {
  let currentIdx = TASKS.indexOf(currentTask);
  return TASKS[currentIdx + 1];
}

we created a function that returns the next task from the TASKS Array, using currentTask as its input. We can try the function and it works, until it doesn't.

If we look closely, we will observe that we left a segmentation fault error in our code("segmentation fault" is just an OG way of the compiler telling us, it can't find the thing we are looking for as the index is incorrect).

And since we have found out the problem, it's an easy fix.

const TASKS = ["Task 1", "Task 2", "Task 3", "Task 4"];
function getNextTask(currentTask) {
  let lastIdx = TASKS.length - 1; 
  let currentIdx = TASKS.indexOf(currentTask);
  if(currentIdx >= lastIdx) {
    return null;
  }
  return TASKS[currentIdx + 1];
}

Looking so much better already :)

Introducing Uncertainty 😈

Happy with the implementation we deploy it to production. Few days in, you suddenly observe that the function seems to have some error and the code is failing in production.

Our initial investigation tells us the function keeps returning the first element of the array. Can you guess what might be causing the issue ??

Congratulations to everyone, you all win the explanation, ready here goes 🥁 🥁 🥁

The curious case of the missing item

Our investigation has finished, the errors seem to be caused when currentIdx is -1, which happens when the item is not found in the array.

Now that we know the issue, an obvious solution seems like handling this cause.

const TASKS = ["Task 1", "Task 2", "Task 3", "Task 4"];
function getNextTask(currentTask) {
  let lastIdx = TASKS.length - 1; 
  let currentIdx = TASKS.indexOf(currentTask);
  if(currentIdx === -1) return null;
  if(currentIdx >= lastIdx) return null;
  return TASKS[currentIdx + 1];
}

We fixed the issue and our function seems to work fine now.

The Problem

Considering the above function as a reference we fixed the issue by adding a defense condition which work. But the function getNextTask was designed to return the next task which we accidentally changed to validateTaskAndReturnNextTask, this is an issue but not a deal-breaker. The bigger problem here is, we didn't fix the problem, we just patched the inception point of the error, which can be lead to more unexpected issues.

Error Friendly Functions

We need to rethink how we write functions, make them more robust so that they make our software better.

const TASKS = ["Task 1", "Task 2", "Task 3", "Task 4"];
function getNextTask(currentTask) {
  let lastIdx = TASKS.length - 1; 
  let currentIdx = TASKS.indexOf(currentTask);
  if(currentIdx === -1) throw new Error(`Invalid task ${currentTask}`);
  if(currentIdx >= lastIdx) return null;
  return TASKS[currentIdx + 1];
}

When you look at the code above not a lot has changed, we updated the defense condition from a return to an error.
You might say I just increased your work and now you need to write try-catch everywhere, to which I will say "No good sir you don't".

Don't handle the error

Yes, I am serious "don't handle errors". Yes I know, that would mean your application will crash, but that's exactly what we want.
Consider our getNextTask function. In an ideal world, we will never get the case where currentTask is not found in the TASKS array. And since our function works on that assumption, it should shout on us when its conditions are not met and hence we throw an error.
With this idea of letting our applications crash, we made an unexpected superhero friend The Stack Trace.
Stack Traces are great, they give you an exact history of what happened and how it happened to maintain both state and order of execution of operations, which is extremely helpful in finding the actual error, which in our case would be the statement that makes the currentTask an invalid entry in TASKS array so that we can solve the actual problem and not just patch the problem inception point 🚀🚀🚀🚀.

But leaving unhandled exceptions in our code is a terrible idea, especially when deploying to production. So, to deal with that we create a helper.

function reportError(message) {
  if(process.env === "PRODUCTION") {
    // Call to your logging service or bug tracker
    // MyBugService.error(message)
  } else {
    throw new Error(message);
  }
}

const TASKS = ["Task 1", "Task 2", "Task 3", "Task 4"];
function getNextTask(currentTask) {
  let lastIdx = TASKS.length - 1; 
  let currentIdx = TASKS.indexOf(currentTask);
  if(currentIdx === -1) reportError(`Invalid task ${currentTask}`);
  if(currentIdx >= lastIdx) return null;
  return TASKS[currentIdx + 1];
}

And with that, you just created a better critic for your code which can help you catch hidden bugs in the development phase and will help your make more robust software from the get-go.

Removing duplicate objects from an Array

Vipul — Wed, 30 Sep 2020 06:34:30 +0000

Today I came across this Article which talks about, how it is difficult(computationally) to remove duplicate objects from array. The algorithm used is standard and still not very performant on scale, so I thought "can we do better, can we come up with a faster algorithm".

Before our further discussion, let me summarize the original article real quick. Looking at the code sample below, what do you think will be the output of the last line.

let people = [{name: 'vipul', age: 20}, {name: 'vipul', age: 20}];
console.log(people[0] === people[1]);

The answer is false, because objects in JavaScript are reference types, meaning when you compare two objects instead of comparing there keys, there references are compared. Since we are creating new objects inline, we get new references each time, and thus the answer is false.

Introducing Symbols

ES6 added bunch of new features to the JavaScript language which gave us some new cool features to play with. One of those is Symbols, which are really cool and can help us solve out problem better.

Our Faster Algorithm

let arr = [
  {
    firstName: "Jon",
    lastName: "Doe"
  },
  {
    firstName: "example",
    lastName: "example"
  },
  {
    firstName: "Jon",
    lastName: "Doe"
  }
];

const removeDuplicates = (arr) => {
  const symbolValues = [];
  return arr.filter((item) => {
    const { firstName, lastName } = item;
    let keyStr = `${firstName}_${lastName}`;
    let symbolValue = Symbol.for(keyStr);
    if (!symbolValues.includes(symbolValue)) {
      symbolValues.push(symbolValue);
      return true;
    } else {
      return false;
    }
  });
};

Explanation

In out algorithm, we are using two core features of Symbols

Symbol.for(key) returns the same value, for the same key throughout the program.
Symbols can be compared with other Symbols.

First we iterate over the array and create equivalent Symbol values using Symbol.for where the key is a combination of the keys of the object. Then we simply just filter the original array based on conditions of not finding any existing Symbol with the same values.

Benchmarks

I did some tests, just for fun and turns out this solution is pretty scale able too. Here are some of the results

For 100 elements or so, it takes about 5.5ms where as the approach used in the original article takes 2.2ms.
For 500 elements or so, it takes 5.7ms whereas the other algorithm takes 11.7ms.
For 1500 elements or so, it takes 3.886ms whereas the other algorithm takes 32.82ms.
For 8000 elements or so, it takes 5.57ms whereas the other algorithm takes 60.71ms.

And after that I was obviously bored, so If someone finds this useful and does some testing on a bigger and may be more real world data, I would love to know stats.

If you want to talk more about the implementation or anything else, you can find me on Instagram or Twitter as @vipulbhj

Thank you so much for reading, don’t forget to share If you find the information useful.

Offline-first Apps, huh ?

Vipul — Fri, 21 Aug 2020 06:52:57 +0000

Chances are, when I say the term "offline-first" apps, you will go like "huh🤔 what's that". And If you just did that, let me introduce you to this exciting new idea of building apps, that work for everyone(doesn't matter if you have a internet connectivity or not).

But Wait a minute, all apps on my phone work alright with or without internet. What's new in this ?

Well, that's a correct observation, and this is often the case that trips people while thinking about offline-first apps. How are they any different from apps like calculator, notes, etc.

The Subtle, but Critical difference

Apps like calculator, notes, etc are what is knows as offline apps, because of the property of having no dependence on your internet connectivity. But with offline-first apps, users need to connect to internet every once in a while for the app to function correctly.

Sounds, weird🙄

Let look at an example, Imagine we have an app like Netflix, which is primarily a streaming platform, i.e users need internet connectivity to be able to use there platform. Now, say that they want to expand into countries, where either internet is not available at all, or the internet speeds are just too slow, or the prices are just to high. So to take there business to a place where users don't have consistent internet connectivity, they would have to change there app architecture to support working without internet.

This theoretically can be achieved by an offline-first app. They can keep, a selection of say like 10 movies within the app and when the user is done watching those, then they can connect to the internet and can get more videos.

Now the example above might not make complete sense in terms, like this is exactly similar to downloading movies. But for some companies this makes more sense. Take for example uLesson, which is an eLearning company, operating in Western Africa Regions, they ship data dongles to there customers, which has the learning material. Students can learn, give tests, take exams, etc. After a set amount of time, the user has to connect to the internet briefly to sync there progress, get new content, etc. For them, the offline-first app model makes sense, since without it they can't reach there customers.