Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

International developers and building for the next billion users

385 views

Published on

This talk is centered around performance bottlenecks in regions like Africa. Also, it highlights ways to mitigate the effect of these network connectivity issues, using effective technology and the rapid growing developer community in Africa

Published in: Technology
  • Be the first to comment

  • Be the first to like this

International developers and building for the next billion users

  1. 1. 1 International Developers and Development Building for the Next Billion Users
  2. 2. Hello! I’m William Imoh “Chuloo”. Twitter @iChuloo 2
  3. 3. Quick . . . ● Save your questions for the Q&As. I’d love to hear them but hear me out first. ● Tweet at @iChuloo #Cloudinary 3
  4. 4. “ 1.3 Billion 4 😮
  5. 5. “ Welcome to Africa, the continent of everything good and something “edgy.” 5
  6. 6. 6
  7. 7. 7
  8. 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. 9. The Solutions 9
  10. 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. 11 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.
  12. 12. 12 JavaScript API MARKUP What is JAMstack? PRPL, JAMstack, and PWAs
  13. 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. 14 ◎GatsbyJS ◎Next.js ◎Hugo ◎Nuxt.js ◎VuePress Tools for JAMstack Apps PRPL, JAMstack, and PWAs
  15. 15. 17 Q: What are PWAs? A: Cache everything! Progressive Web Apps PRPL, JAMstack, and PWAs
  16. 16. 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
  17. 17. Media Optimization 19
  18. 18. ◎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
  19. 19. 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
  20. 20. 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
  21. 21. 23 Cloudinary Debugger Media Optimization
  22. 22. 24 Cloudinary Debugger (Cont’d) Media Optimization
  23. 23. 25 Chrome Dev Tools They are your friend. Media Optimization
  24. 24. Diversified, Test-Driven Development 26
  25. 25. “ 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
  26. 26. 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
  27. 27. 29 Community and User Groups The dev community in Africa is yuuuuuuge!
  28. 28. 30 forLoop, Africa Andela Learning Community GDG Ingressive Communities FB Dev Circles Dar JS Devcenter Dev Communities in Africa
  29. 29. ● 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
  30. 30. 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.
  31. 31. 33 ConcatenateConf, August 2018 Image credit: @Rotimiokungbaye
  32. 32. 34 forLoop Lagos Image credit: @Rotimiokungbaye
  33. 33. 35 Consider building or supporting a remote developer community
  34. 34. 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.
  35. 35. ● 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?
  36. 36. “ Questions? 38
  37. 37. 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/
  38. 38. 40 Thank you!

×