This talk is aimed at sharing and solving performance bottlenecks for products built in the west but used in Africa.

1. 1
Developing
Internationally
Building Stuff That Works Across the
World

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 #AdobeSF
3

4. “
1.3 Billion
4
😮

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

6. 6

7. 7

8. The Problems
◎Everything can be fast but some works
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.
8

9. The Solutions
9

10. ● Development architecture and pattern: PRPL,
microservices
● Optimized media delivery
● Diversified, 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,
etc.
◎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
They 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 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!
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 and understand
the best-fit pricing models.
◎ You benefit from independent advocates who
promote your product or brand.
◎ You get quick feedback on your product—from first
deployment to seasoned usage.
◎ You earn autonomous support from members who
use your product.

33. 33
ConcatenateConf, August 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 superimportant.
◎Diverse teams make more robust international
products.
◎Communities and user groups invariably
promote product usage and support.

37. ● 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?
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!