O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Developing internationally building stuff that works across the world - adobe

Carregando em…3

Confira estes a seguir

1 de 40 Anúncio

Mais Conteúdo rRelacionado

Semelhante a Developing internationally building stuff that works across the world - adobe (20)

Mais recentes (20)


Developing internationally building stuff that works across the world - adobe

  1. 1. 1 Developing Internationally Building Stuff That Works Across the World
  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 #AdobeSF 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 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. 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 Dev Center 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!

Notas do Editor

  • Tell my story
    Move on to what the talk is about.
    A developer approach.
  • Introduction.
    Twitter--dunno the handle but you can hit me up if you need me.
  • --- Highlight QnA at the end
    -- Tweet, winner gets a custom Gatsby Shirt
  • Telling the lagos story and network issues
  • 35% Internet Penetration in Africa with
  • Explain each bullet point and provide context with examples for each point. From a developer perspective
  • Explain each point
  • Explain PRPL, its applications and how useful it is.
  • Explain JAMstack, a new concept.
  • Verify these examples
  • Crazy lighthouse scores
  • On mobile
  • List features of PWAs
  • Include meme on media delivery
  • List features of PWAs
  • Check
    First meaningful paint
    Time to interactive
  • List features of PWAs
  • List features of PWAs
  • List features of PWAs
  • Chroome dev tools tips.
    Network tab and performance tab
  • Include meme on media delivery
  • Test Development
    Test Deployment
    Test Possible Target market and possible adoption
    Test Everything!
  • If you must deploy the product to traditional servers, make the process easy with step by step how-to guides
  • List features of PWAs
  • Estimate size of communities
    Number of communities
  • More results from what we are doing
  • Add numbers on community here
  • Add numbers on community here
  • What next?
  • Add numbers on community here
  • Sweet dreams!