Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Modular JavaScript: FEL, Feb 2013
Search
Jack Franklin
February 28, 2013
Technology
0
88
Modular JavaScript: FEL, Feb 2013
Jack Franklin
February 28, 2013
Tweet
Share
More Decks by Jack Franklin
See All by Jack Franklin
Advanced React Meetup: Testing JavaScript
jackfranklin
1
200
Components on the Web: Frontend NE
jackfranklin
1
770
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
420
Front Trends: Migrating complex software
jackfranklin
1
770
Migrating from Angular to React: Manc React
jackfranklin
1
150
Half Stack Fest: Webpack
jackfranklin
4
490
FullStackFest: Elm for JS Developers
jackfranklin
1
210
Codelicious: Intro to ES2015
jackfranklin
0
340
PolyConf: Elm for JS Developers
jackfranklin
0
250
Other Decks in Technology
See All in Technology
普通のエンジニアがLaravelコアチームメンバーになるまで
avosalmon
0
670
20240522 - 躍遷創作理念 @ PicCollage Workshop
dpys
0
310
Azureの開発で辛いところ
re3turn
0
200
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
12k
【令和最新版】ロボットシミュレータ Genesis x ROS 2で始める快適AIロボット開発
hakuturu583
2
1.4k
20241228 - 成為最強魔法使!AI 實時生成比賽的策略 @ 2024 SD AI 年會
dpys
0
340
20241125 - AI 繪圖實戰魔法工作坊 @ 實踐大學
dpys
1
440
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
830
深層学習と3Dキャプチャ・3Dモデル生成(土木学会応用力学委員会 応用数理・AIセミナー)
pfn
PRO
0
410
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
1.8k
OPENLOGI Company Profile for engineer
hr01
1
17k
AIエージェントに脈アリかどうかを分析させてみた
sonoda_mj
2
130
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
Rails Girls Zürich Keynote
gr2m
94
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
RailsConf 2023
tenderlove
29
960
Adopting Sorbet at Scale
ufuk
74
9.1k
Designing Experiences People Love
moore
139
23k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Mobile First: as difficult as doing things right
swwweet
222
9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Scaling GitHub
holman
459
140k
Transcript
Modular JavaScript @Jack_Franklin
First: An Apology...
Who is this guy? Author of "Beginning jQuery" Blogger at
javascriptplayground.com Developer for Kainos (JS & Ruby) Comp-Sci student at University of Bath
Book Giveaway! Tweet your most cringe-worthy, clean joke with the
hashtag #feljoke I'll pick two winners once I'm done talking.
The era of web applications
What is Modular Development?
Separation of Concerns
One Module One Concern
Loose Coupling
modules don't know about each other modules are independent modules
don't talk to each other directly so they need some way of communicating
Publish and Subscribe
Modules have no knowledge of each other Modules publish events
Modules subscribe to events Loosely coupled, more maintainable modules don't publish events to specific other modules, but just do it generally
JS Patterns JavaScript is really good!
The Module Pattern var APP = (function() { var _count
= 0; var incrementCount = function() { _count++; } var getCount = function() { return _count; } return { incrementCount: incrementCount, getCount: getCount }; })(); _count is kept private can only be manipulated through incrementCount
RequireJS
RequireJS Implements the AMD Spec define() modules require() them No
more <script> tag rubbish Dynamic module loading Build tool
Package Managers
Package Managers JamJS Bower Component Volo nodefetch
GruntJS The JavaScript Task Runner
GruntJS Run tasks on your JS, including plugins for: -
Concatenating - Minifying - RequireJS Build Tool - Sass / LESS - CoffeeScript - Handlebars / Jade / templating - QUnit / Jasmine / Mocha / testing
Going Modular
- one step at a time - split your JS
up (in development) - use a tool (Grunt) for production JS - jQuery does Pub/Sub - initial hurdles outweighed by long-term gains
Questions? @Jack_Franklin javascriptplayground.com jackfranklin.co.uk github.com/jackfranklin