[Music]
good morning everyone
okay sure you're not sleepy - okay I'm
actually a show today for this talk with
my college - person talks but he still
sleep when I went out he's not feeling
well so when when I will I was walking
here I stumble upon this gravity on the
a linear periodic road so it I just took
it two hours ago and I think descriptive
so provoking for me and it's true so
that with my teeth talks often force
okay I'm and I'm from when do I work for
if you see it it was an IOT stirrup in
upper cultures a confessors domain I
don't know if have anyone of you I first
see this kind of shrimp ponds do you
know where your streams come form your
luxury seafood dinner this this is
shrimp ponds and it's wonderfully spawns
and what is uh what else they do they
usually feeding they're faced recently
by this burst defeat human and this
causing a lot of downside for them
because our feeding could cause she's
dead and it happens in just a one night
offer a feed waste will go down the pond
and it will release the ammonia and I'm
gonna kill the fish so we built a
product like this and I do some hardware
I do some software I do some data but
most of the time I do nothing I just
talked with people
and actually we are practicing extreme
programming we caught by the pond
literally extreme programming okay
anyway I chest my title talks to simple
development rapid doesn't really mean
simple but simple could be can help us
wrap it and it was kind of absolute
title often first web it web but offline
first so what's on the menu we are
talking with offline first actually
single parts going out there my own
solution my and then we were talks with
an other walks in this kind of area so
just like everybody else before
can you please stress the hand if you
have have ever heard offline first okay
rigidity like I said 80% haven't heard
offline offers before okay so I first
know the terms of offline first like two
years ago we are building an application
an Android application for to be exact
and it's not working for our customers
and we found this site it's it's like
kind of movement it's like an
organization with it it's a little
community that talks anything libraries
lighting technology can that can work in
two countries so this it's like more
design actually design a fruits for
building application so it's not it's
more like a paradigm it's not abstract
concept it's a like paradigm how to
build application and so why you should
care always we should care
first thing rural areas yesterday
speakers from India Krishna or yep treat
nur talk about rural areas India so why
because they were marginalized by
technology I don't know if we are
creating technology for rural areas
beset nonprofit organization and social
cost in Africa or anything and this one
rural areas is one of our customers in
Indonesia and look at their Metro
perforates it was no internet connection
almost no internet connection on the
seashore so that one is in north of Java
if you have heard Java before Indonesia
not just Bali
I also meet people and where you come
from Indonesia or Bali Bali
oh no nobody I'm from Bandung Indonesia
yes Indonesia okay and this is data come
from 2016 we have three billions
Internet user but just 1 billion get
access for high-speed Internet it is one
third of total users and the others
still living with connection but not
necessarily good connection the first
one is India China and Indonesia my
country comes third so why why we we
call this world wide web but we just
make it for West wealthy Western web
it's not my quotes
it's from Bruce Lawson so it's not
biased from me but yeah I grew it with
him so did some what wide web should be
encouraged more and why people by 2050
we will have population boom I mean a
lot of people going multiplied merits
have kids every year every day but it
will be an unconnected work because
India China Indonesia will have a
massive population but I don't know if
our infrastructure technology or network
of roads will catch up really fast by
2050 and maybe
it was their first internet interaction
by smartphone I am sorry one of our
customers they just know it was
smartphone they told it was a small team
what control at first man he only span
like 2 gigabits quota but next year when
we come back again
his son using smartphone and spend more
than 20 gigabits quota I think wow ok
we thought we give them access and now
they are consume more internet but with
20 gigabits quota no his son playing
drone flying drones in rural areas
because he knows that oh this one drone
and where where where can i buy it so
absolutely
after she knows internet connection he
can learn much faster you can learn you
can gain knows anything by connectivity
ok that's good but it comes with a
drawback smartphone user we are living
in to 10 20 years before we are first
exposed to internet by except
application and there's another bear
it's barriers its design language icons
and anything it doesn't work with our
users because they know their first
interaction by smartphone so they don't
know what hamburger icon is what the
home icon is they just read the text
that's not a barrier and next
availability you won't have connectivity
to senior data so we have to remember
this and I took it from the distributed
system network fellows this network is
your enemy the network is never reliable
so if you think that network is variable
then you can have to wonder fallacies in
the submitted system
okay so I already show to you what's the
problem what's the initial cost and how
today's technology approach this problem
you know the traditional kinds of
remodels and this one is often force
model so with the traditional pencil
models we are really have to access the
cloud to get the page but in the often
first module the data the assets the
anything should be on the client side
well it comes progressive web apps comes
with the solution we have native look
like we have service worker we have
network Begaren sing and you need just
to create a manifest that can catch your
assets you need you have that work at
that you yeah you can intercept the
network request
so is it progress about ups enough
how about data synchronization how about
conflict resolution when your users
online you can transact data real-time
but when your us user offline and your
users mutate or modify the data how
about when they're coming online
how about to sing this data alright
first we have progressive web apps to
check the network we have network casing
but the other evolution it's not a
revolution the other movement progresses
is how to sing the data based on my
experience there's two type of
synchronization document state and
common state if you use what box yeah
yesterday that that was progressive web
apps workshop right if you use workbooks
and you use network break dancing and
network you can sing your applique
like groan they comment by storing the
net what's the request and execute after
you are online it was a it is a
convention that scene so let's see about
the document state I board from the
trailers synchronization architecture in
it was the first time I learned about
synchronization and cut the depend on
central object has to be implemented in
the client and they only send Delta's of
the data modification it was a
documented so you have a prior document
and your current document and you're
sending the Delta State it was a
document state and how about the
comments dead there's another libraries
really screwed us offline basically it
was right your request to store it and
then if you are coming online it will
execute your previous requests
sequentially and it and I was using this
kind of approach okay but it's terrible
if I use this the comments that sing and
comments that sing I still implement on
the back inside the synchronization
mechanism how to configure is looting
with users data and it all it was all
handled on the back inside it's a it's a
converse um and really not a good
experience for me and then you know
every my all from Google crossfire saw
it it is a beckon as a surface it comes
with reactive synchronization it comes
with offline support but it takes your
many way too fast
yeah too fast I wrote
little prototype when i--when five
storages comes out one years ago I think
a year ago I did some bad with
architecture or bad implementation and
it it took $20 for two weeks application
that's bad and I found Coach DB it is it
is an alt document database it's come
before MongoDB become well-known it's
but it comes with pots DB it's an
implementation of coach DB in JavaScript
client so the possible we could live in
your application where JavaScript it
with a little or a bit little size and
it it has approach sweet must multi
master nodes so actually that database
replication the database not only on the
cloud but your device is also a database
and it comes with a HTTP protocol for
replication so no need urine you don't
have to create another sing mechanism
because it was ready by the design okay
so what I'll tell you what do we choose
actually for all of ours of course we
need some requirement we need to web
development ready we need to mobile
development ready and time to implement
faster I don't put any economical
constraint here and I just caught the be
enforced to be with react why would
react yeah because I we were familiar
with react and react native that's way
and we can react react already
implemented surface rock already so you
just uncomment or sorry you just remove
two words the unregister change you to
register
that's we we gather offline first web
app
but it's not very simple development you
get who you have a lot of boilerplate
then you have to make a lot of
abstraction with the pots and pots DB
and we are coming with the another ideas
how do what if we create a reactive
rendering for pots and coats so your
your application cool render by
instantly yeah how do you interact with
in like a stack container what if we
create like a stack to endure to
interfacing odds with page century side
and this was classic approaching whereas
we have surfer we have component
renderer and this component state and if
we introduce offline first by using this
kind of thinking if we use redux we have
global stat Redux that that halt with
local storage that that interact with
surfer interact with component and if we
design with without Redux you only need
a local storage to store your data state
and if you remember this one from its
tremolo I think we're gonna use the
offline for sweet at radix because it's
much more similar with what other people
already had and we won't take another
step to reinvent the wheel
so we're creating that container
interfacing with data synchronization we
call it pot store it was in production
ready yet but we use it for our internal
tools and we have a story what gist or
example and it was a it is a to-do list
because nothing to trail in the world
that came with tout a to-do list simple
app ok this is how we initialize the
store which you just need to set your
URL remote
config and your authentication if it's a
label and this one is for the component
side you went to component mount you
have to subscribe the VIP I to render to
render your pets reactively and if you
want to add some item you just call the
add item API and for dello to you you
could just call the direct item so we
abstracted more of odd squad of pods
implementation to add end to the other
item and if you want to fetch the data
you could just call the dotted data it
contains your data and you can play with
it because this one this is our store
looks like in detail you have local deep
local DB ok remote DB and it will
replicate from and synchronous from
local and cloud vice versa and it will
it is what's your it was watching your
data changes so basically your your
application will read from the memory
not from the local storage and it comes
with crude IPA called mitosis really so
you don't have to create another
boilerplate few lines of code we are we
put in front for react different ring
but how about the relative support
because we we want to make what will
develop on radio also pots or pots
application I'm sorry what's libraries
use indexdb and it will fall back to web
a scale if there is an next DB what how
was recognized by whiskey l & SQ what's
use web SQL dragnet if can use SQLite
why not create an adapter for react
native for SQLite adapter and we stumble
upon Cordova SQLite stories and we we
just modified recognize post reg native
implementation by I think storage be
asking started to use the SQLite store
right why we asked you let storage
because it's much larger and much bigger
index DB can can hold about 50 to 60
megabytes I think I forgot the exact
number and SQLite do also okay so we got
a simple development often force web app
with reactive rendering and it's it is
thinking that online this one from web
and this one from mobile you can upload
it and if within goes offline you can
use your app as usual and with your
playing with the data and we can sing
directly after it has a connection so no
need to create another power of plaid
but we still have problem with a
processor limited about next connection
and we still have basic features need to
implement another slightly filtering and
my lesson was most conclusion is do not
create your own synchronism it's the
nightmare to creature
one thing mechanism and for other works
you have you could see the others like
Gandhi be looking for software by Martin
clip one you saw read what Martin click
on okay
I think the half of these tops I like
become a lecture because it was too
technical but III want to have a talk
with op and force and yeah you can think
me if you want thank you