Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building an in-browser IDE with JavaScript

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Paris Kasidiaris Paris Kasidiaris
December 17, 2015
Programming
180
1

Building an in-browser IDE with JavaScript

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

Avatar for Paris Kasidiaris

Paris Kasidiaris

December 17, 2015

More Decks by Paris Kasidiaris

See All by Paris Kasidiaris
Docker Compose CLI for ECS
Avatar for Paris Kasidiaris parisk
0
70
Remote business as usual
Avatar for Paris Kasidiaris parisk
0
29
Real time sweetness with Django Channels
Avatar for Paris Kasidiaris parisk
0
240
Stateful applications on Docker Swarm
Avatar for Paris Kasidiaris parisk
1
140
Get back to sleep with Infrastructure as Code
Avatar for Paris Kasidiaris parisk
0
39
Say No
Avatar for Paris Kasidiaris parisk
0
100
Developing Microservices Frictionlessly
Avatar for Paris Kasidiaris parisk
0
62
Creating a cloud-native development environment
Avatar for Paris Kasidiaris parisk
0
130
Ceryx - San Francisco API Meetup
Avatar for Paris Kasidiaris parisk
0
100

Other Decks in Programming

See All in Programming
代数的データ型って何が嬉しいの？ #frontend_phpcon_do
Avatar for Takuma Kajikawa kajitack
8
3.8k
技術的負債解消で開発者の未来を開く- AIの力でコード刷新
Avatar for Kato Ryo kmd2kmd
0
110
キャリア迷子上等 ─ "ない道"は自分で作ればいい
Avatar for 16bit_idol 16bitidol
3
2.2k
スマートグラスで並列バイブコーディング
Avatar for Hayami Shuhei hyshu
0
260
Datadog × OpenTelemetry 入門と実践のあいだ
Avatar for Max Kento kn_to_maxpno
1
170
Honoでのサプライチェーン侵害対策 〜 3つのライブラリに学ぶ
Avatar for Yusuke Wada yusukebe
7
1.4k
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
Avatar for Estela Franco guaca
0
190
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
13
6.4k
Vite+ Unified Toolchain for the Web
Avatar for Naoki Haba naokihaba
0
330
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
依存関係から依存物へ―Dependencyという言葉の歴史をひも解く
Avatar for j_lee_inst j_lee
0
130
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
200

Featured

See All Featured
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
210
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
62
44k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
40k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.1k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
420
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
150
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
590

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