Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
190
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
81
Remote business as usual
Avatar for Paris Kasidiaris parisk
0
35
Real time sweetness with Django Channels
Avatar for Paris Kasidiaris parisk
0
250
Stateful applications on Docker Swarm
Avatar for Paris Kasidiaris parisk
1
150
Get back to sleep with Infrastructure as Code
Avatar for Paris Kasidiaris parisk
0
48
Say No
Avatar for Paris Kasidiaris parisk
0
110
Developing Microservices Frictionlessly
Avatar for Paris Kasidiaris parisk
0
70
Creating a cloud-native development environment
Avatar for Paris Kasidiaris parisk
0
140
Ceryx - San Francisco API Meetup
Avatar for Paris Kasidiaris parisk
0
110

Other Decks in Programming

See All in Programming
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
290
AWS DevOps Agentで インシデント対応をAIに任せたい
Avatar for HonMarkHunt honmarkhunt
7
3k
Family mrubyの進捗
Avatar for Katsuhiko Kageyama kishima
1
130
20260914 AIエージェント時代のPlatform Engineering　LLM基盤とプロダクトの責務境界線
Avatar for Taiki Kanzaki kanfab1
7
2.1k
Snowflakeで業務アプリを作ろう。 Snowflakeのアプリ機能解説&実践ガイド
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
280
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
190
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
440
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
Avatar for hatsu hatsu38
0
350
thread_parallel_with_free-threaded_Python_and_NumPy.pdf
Avatar for Riku Sakamoto riku_sakamoto
0
350
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
2k
変化を抱擁するドキュメントの作り方 - ビジネスルール駆動開発がもたらす、コードとの新しい関係
Avatar for ioki ioki
2
210
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
Avatar for Prota prota
1
500

Featured

See All Featured
A Soul's Torment
Avatar for Nat Ma seathinner
8
3.6k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
330
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
1
470
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
520
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.6k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
500
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k

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