> For the complete documentation index, see [llms.txt](https://founders-and-coders.gitbook.io/coursebook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://founders-and-coders.gitbook.io/coursebook/src/course/syllabus/developer/app/spikes.md).

# spikes

## ES Modules

How can we modularise our client-side JavaScript?

### Questions to consider

* What are the different ways we can import/export code? What does "dynamic import" do?
* Why might using hundreds of small modules in the browser cause performance problems?

### Useful resources

* [Modules | JavaScript for impatient programmers](https://exploringjs.com/impatient-js/ch_modules.html#overview-syntax-of-ecmascript-modules)
* [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)

## Browser rendering

What is the "critical rendering path" in browsers?

### Questions to consider

* How does the browser render an HTML page containing links to CSS and JavaScript files?
* What does "render blocking" mean?
* What do the `async` and `defer` keywords do?

### Useful resources

* [Understanding the Critical Rendering Path](https://bitsofco.de/understanding-the-critical-rendering-path/)
* [Efficiently load JavaScript with defer and async](https://flaviocopes.com/javascript-async-defer/)

## Browser caching

How can we avoid unnecessary network requests?

### Questions to consider

* What is HTTP caching?
* How can our server tell browsers to cache our responses?

### Useful resources

* [HTTP Caching | Web Fundamentals](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching)
* [The HTTP cache: your first line of defense](https://web.dev/http-cache/)

## Image performance

How we can efficiently serve image assets?

### Questions to consider

* How can we optimise image file size?
* How can we render different images at different viewport sizes?

### Useful resources

* [Image Optimization | Web Fundamentals](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization)
* [Responsive Images: If you’re just changing resolutions, use srcset](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/)
* [Native lazy-loading for the web](https://web.dev/native-lazy-loading/)