Building an in-browser IDE with JavaScript

Insights on how we manage static assets of our client side code at www.sourcelair.com

Transcript

1. SourceLair Building an in-browser IDE with JavaScript
2. HI, I AM PARIS I work for SourceLair A website that lets people code in their browsers.
3. Let's talk about managing static assets.
4. THE CODEBASE Back-end is built on Django and Tornado. Client is built on vanilla JavaScript.
5. CLIENT SIDE GOALS Sport actual IDE features (terminal, auto complete) Provide great performance (native like) Keep development pleasant (we ❤ writing code)
6. CLIENT SIDE REQUIREMENTS Extensible and scalable design Low-footprint code
7. STATIC ASSET MANAGEMENT GOALS Make development blazing fast Keep production blazing fast
8. BLAZING FAST DEVELOPMENT REQUIREMENTS Modular architecture Inspect each j s file separately in browser Integration with Django's s t a t i c f i l e s app
9. TOOLS USED github.com/jrburke/requirejs github.com/etianen/django-require
10. BLAZING FAST PRODUCTION One single monolithic file Minimum size Served through CDN
11. TOOLS USED github.com/jrburke/r.js github.com/jrburke/almond github.com/django-cumulus/django-cumulus
12. SOME CODE
13. settings.py
14. home/js/main.build.js
15. Template Development rendering Production rendering
16. GAINS very simple structure pleasant development fast production performance
17. ISSUES Non-standard module system (AMD) Mandatory j s file encapsulation in closure Reloading in development loads 177 j s files
18. THE FUTURE React, ECMAScript 2015 modules, Browsersync? github.com/facebook/react github.com/babel/babel github.com/cyberdelia/django-pipeline github.com/Browsersync/browser-sync
19. WOULD YOU LIKE TO JOIN US? We are searching for a talented Junior JavaScript Engineer. sourcelair.workable.com
20. Thank you. www.sourcelair.com