A talk on building a usable performant web application in remote regions like Africa. Also focuses on non-technical elements of growing product users in these regions.

1. 1
Your Shit Doesn’t Work
in Africa
It should, let’s talk about how.

2. Hello!
I’m William Imoh “Chuloo”.
Twitter @iChuloo
2
I like to roam around
talking about
technology and its
communities.

3. “
1.3 Billion
3
Population of Africa === ~20% of the world

4. “
Welcome to Africa, the continent of
everything good and something “edgy.”
4

5. 5
Lagos, Nigeria.
https://ionigeria.com/5-great-things-lagos-sunday/

6. 6
High => 30mbps+
Low => 200kbps-
Network Speeds

7. 7

8. 8

9. Los Problemas
◎Everything can be fast but some work
reaaaally slowly.
◎Most times, there’s too little direct
product support.
◎Chrome dev tools can be inadequate for
mitigating performance bottlenecks.
◎Pricing models are too high with little
marketing.
9

10. What are the solutions?
10

11. ● Development architecture and pattern:
PWAs, microservices
● Optimized media delivery
● Diversified, test-driven deployment
● Supersimple deployment and support
● Community and user groups
11

12. 12
Q: What are PWAs?
A: Cache everything!
Progressive Web Apps
PRPL, JAMstack, and PWAs

13. 13
◎A fit for offline or low-bandwidth networks
◎Mobile first with native-looking UI
◎Mobile app-like interface
◎Push notifications
PWA Features
PRPL, JAMstack, and PWAs

14. 14
PRPL, JAMstack, and PWAs
PRPL
Push the critical resources for the initial
URL route.
Render the initial route.
Precache the remaining routes.
Lazy-load and create the remaining routes
on demand.

15. 15
JavaScript API MARKUP
What is JAMstack?
PRPL, JAMstack, and PWAs

16. 16
◎Secure: Reduced risk of server attacks
◎Fast: Almost no client-server exchanges
◎Cost-effective: Thanks to Netlify, Now,
etc.
◎Smart: A fit for most sources
◎Familiar: Intuitive dev environment
JAMstack Features
PRPL, JAMstack, and PWAs

17. 17
◎GatsbyJS
◎Next.js
◎Hugo
◎Nuxt.js
◎VuePress
Tools for JAMstack Apps
PRPL, JAMstack, and PWAs

20. Media Optimization
20

21. ◎Longer load time
◎More network data requirements
◎User drop-offs
◎Larger app size == higher hosting costs
◎Rage, anxiety, questions like “Why bother?”
21
Ill Effects of Improper
Image Optimization
Media Optimization

22. 22
◎Adopt lazy loads.
◎Serve from a CDN to reduce bundle size.
◎Practice abstract transformations for less
JavaScript logic.
◎Optimize images for responsiveness in all
devices.
◎Pay attention to First Meaningful Paint and
Time to Interactive.
Tips for Avoiding Bad Media
Media Optimization

23. 23
Media Tooling With Cloudinary
◎ Lazy-load files
◎ On-the-fly manipulation and transformation
with URLs
◎ Secure storage and delivery via CDNs
◎ Optimized and responsive image-delivery
◎ Free tier for developers
◎ Debugger
Media Optimization

24. 24
Cloudinary Debugger
Media Optimization

25. 25
Cloudinary Debugger (Cont’d)
Media Optimization

26. 26
Chrome Dev Tools
They are your friend.
Media Optimization

27. Diversified, Test-Driven
Development
27

28. “
28
“This is the system of effectively working with
distributed teams around the world to build
products with a test-driven approach, done by
these team members all over the world,
including in remote areas.”
— Chuloo, 2019

29. 29
Make deployment as easy as possible for
developer tools. Technical posts are a golden
reference.
Tools like Netlify, Now, and Surge are popular in
Africa because they are simple to use and deploy.
Continuous deployment workflows are highly
important and efficient.
Supersimple Deployment and
Support

30. 30
Community and User Groups
The dev community in Africa is yuuuuuuge!

31. 31
forLoop, Africa
Andela Learning
Community
GDG
Ingressive
Communities
FB Dev Circles
Dar JS
Devcenter
Dev Communities in Africa

32. ● Thousands of Africans are learning to
code and getting software jobs.
● Supporting brands are successful.
● African techies are contributing to
the global tech ecosystem.
● They’re solving many tech problems.
● More food and swag are at meetups.
Great fun!
32
Benefits of Communities

33. 33
What Dev Communities
Mean to You as a Builder
◎ You are giving back to a group of loyal builders
who in turn win you loyal users.
◎ You gain ease of entry to markets and understand
the best-fit pricing models.
◎ You earn autonomous support from members who
use your product.
◎ You get quick feedback on your product—from first
deployment to seasoned usage.
◎ You benefit from independent advocates who
promote your product or brand.

34. 34
Peter - @kenny_io
Chris - @codebeast
Kingsley -
@mayowa_king
Wale - @Ace_KYD
Gift - @lauragift21
Ada - @Kolokodess

35. 35
ConcatenateConf, August 2018
Image credit: @Rotimiokungbaye

36. 36
forLoop Lagos
Image credit: @Rotimiokungbaye

37. 37
Consider building or
supporting a remote
developer community

38. 38
Summary
◎Building fast apps to scale according to
modern development patterns and
architecture is the way to go.
◎Media optimization is superimportant.
◎Diverse teams make more robust international
products.
◎Communities and user groups invariably
promote product usage and support.

39. ● How can I build more scalable apps?
● Am I providing enough remote support
to product users and how can I better
support them through communities?
39
What Next?

40. 40
Additional Resources
● https://cloudinary.com/
● https://www.benjamindada.com/concatenate-conf-recap/
● https://www.benjamindada.com/forloop-africa/
● https://scotch.io/tutorials/building-a-video-blog-with-gatsby-
and-markdown-mdx
● https://scotch.io/tutorials/how-to-use-chrome-dev-tools-to-
find-performance-bottlenecks
● https://chrome.google.com/webstore/detail/cloudinary-
debugger/ehnkhkglbafecknplfmjklnnjimokpkg
● https://developers.google.com/web/fundamentals/performanc
e/prpl-pattern/

41. 41
Thank you!