This talk was given at NetlifySF and it's on providing product development insights to build products that work in Africa

1. 1
Building The Web
For All
Let’s talk about how your
product should perform in
Africa

2. Hello!
I’m William Imoh “Chuloo”.
Twitter @iChuloo
2

3. Quick . . .
● Save your questions for the Q&As. I’d love to
hear them but hear me out first.
● Tweet at @iChuloo #NetlifySF
3

4. “
1.3 Billion
4
😮

5. “
Welcome to Africa, the country of
everything good and something “edgy.”
5

6. 6

7. 7

8. Problems Faced
◎Everything can be fast but is some work
reaaaally slow.
◎Most times direct product support is little.
◎Chrome dev tools can be inadequate for
mitigating performance bottlenecks.
◎Pricing models are too high with little
marketing.
8

9. The Solutions
9

10. ● Development architecture/pattern - PRPL,
Microservices
● Optimized media delivery
● Diversity test-driven deployment
● Supersimple deployment and support
● Community and user groups
10

11. 11
PRPL, JAMstack, and PWAs
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.
PRPL

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

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

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

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

18. 18
◎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

19. Media Optimization
19

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

21. 21
◎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

22. 22
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

23. 23
Cloudinary Debugger
Media Optimization

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

25. 25
Chrome Dev Tools
Chrome dev tools are your friend.
Media Optimization

26. Diversified Test Driven
Development
26

27. “
27
“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

28. 28
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

29. 29
Community and User Groups
The dev community in Africa is Yuuuuuuge!

30. 30
ForLoop Africa
Andela Learning
Community
GDG
Ingressive
Communities
FB Dev Circles
Dar JS
Dev Center
Dev Communities in Africa

31. ● Thousands of Africans are learning to
code and getting jobs.
● Supporting brands are successful.
● More contribution to the global tech
ecosystem.
● More solved problems.
● More food and swag at meetups lol.
31
Benefits of Communities

32. 32
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.
◎ You benefit from independent advocates who
promote your product or brand.
◎ You get quick feedback on your products—from
first deployment to seasoned usage.
◎ You earn autonomous support from members
who use your product.

33. 33
ConcatenateConf, Aug 2018
Image Credit: @Rotimiokungbaye

34. 34
Forloop Lagos
Image Credit: @Rotimiokungbaye

35. 35
Consider building or
supporting a remote
developer community

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

37. How can i build more scalable
applications?
Do i provide enough remote support
to product users and how can i make
it better through communities?
37
What next?

38. “
Questions?
38

39. 39
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/

40. 40
Thank you!