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
Marionette: Building your first app
Search
Frontend NE
May 07, 2015
Technology
0
400
Marionette: Building your first app
Building your first web app in Marionette
Frontend NE
May 07, 2015
Tweet
Share
More Decks by Frontend NE
See All by Frontend NE
Standardizing 'select': What the future holds for HTML - Stephanie Stimac @ FrontendNE
frontendne
4
350
CSS Regression testing - James A Lambert @ FrontendNE
frontendne
1
300
Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE
frontendne
0
1.3k
What I learnt about hiring diverse teams from conducting a fully-anonymous recruitment process - Bethan Vicent
frontendne
0
240
Web Design that Doesn't Make Trans People Uncomfortable - Jessica Kelsall
frontendne
0
690
Contain yourself - Docker for developers
frontendne
2
240
Design process of a website
frontendne
0
260
What the JAMstack?
frontendne
1
860
Talking the talk
frontendne
0
450
Other Decks in Technology
See All in Technology
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
180
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
380
Recoil脱却の現状と挑戦
kirik
2
260
データエンジニアリング 4年前と変わったこと、 4年前と変わらないこと
tanakarian
2
340
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
140
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
230
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
5
150
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
220
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
500
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
170
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
190
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Documentation Writing (for coders)
carmenintech
72
4.9k
Producing Creativity
orderedlist
PRO
346
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Making Projects Easy
brettharned
116
6.3k
Building Adaptive Systems
keathley
43
2.7k
Writing Fast Ruby
sferik
628
62k
Music & Morning Musume
bryan
46
6.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Transcript
Marionette Building your first app
Building your first app Cover core Marionette concepts Routing Layouts
Event handling Rendering data
Who am I? Lead developer Pebble Income Generation for Schools
Python/Django Web apps
JavaScript Framework Generate HTML Server integration Respond to user input
Why Marionette? Backbone.js No magic … ok maybe a little
Active development Helpful, friendly community
Microblog Simple list of tweet-like objects Click on an item
to view connected comments Won’t look pretty Focus on the HTML we need
Marionette - Application Links your page to your app Starts
your JavaScript app Initialise your routes and layouts Feed data into your app
Marionette - AppRouter Map URL fragments to methods Wire up
your controller
Marionette - Controller Decide what screens to show Handle top-level
data flow
Marionette - Views Renders data Event handling User Input Data
change
Backbone - Models Your data Binds your application to server
Fetch Save
Backbone - Collections Like models but lists Optional type-checking Helpers
Marionette - Event/Trigger Handle user input Propagate view hierarchy React
to model changes
And more Behaviors - common view behavior Radio - global
events Template engines Regions Underscore
Helpful Links gitter.im/marionettejs/backbone.marionette backbonejs.org underscorejs.org marionettejs.com/docs/current YouTube - Dancing with
Marionette
Questions? https://www.mypebble.co.uk scott.walton@mypebble.co.uk @scott_walton github.com/scott-w www.scottwalton.codes