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
XFramework: the story so far
Search
Ilya Pukhalski
March 30, 2014
Programming
0
490
XFramework: the story so far
Why and how XFramework was built.
xframeworkjs.org
Ilya Pukhalski
March 30, 2014
Tweet
Share
More Decks by Ilya Pukhalski
See All by Ilya Pukhalski
There's a bot for that
pukhalski
1
300
50 Shades of Flux
pukhalski
3
390
Why Mobile Web Still Sucks
pukhalski
3
530
Responsive Typography: Wrap-Up
pukhalski
8
420
Next Level SVG
pukhalski
1
1.7k
XFramework: build cross-platform responsive web apps easily
pukhalski
3
980
Mobile Cross-Platform Development
pukhalski
2
320
Rest in PS: рабочий процесс современного веб-дизайнера
pukhalski
12
1.6k
Что сломалось в белорусском интернете?
pukhalski
4
510
Other Decks in Programming
See All in Programming
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
610
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
770
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
CSC509 Lecture 03
javiergs
PRO
0
330
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
Model Pollution
hschwentner
1
180
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.8k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Documentation Writing (for coders)
carmenintech
75
5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Typedesign – Prime Four
hannesfritz
42
2.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
How to Ace a Technical Interview
jacobian
280
24k
Why Our Code Smells
bkeepers
PRO
339
57k
Fireside Chat
paigeccino
40
3.7k
Building an army of robots
kneath
306
46k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
Scalable Cross-platform Web Apps ! A long history of one
solution
@pukhalski ! Solution Architect @ EPAM Systems Lecturer @ BHSAD
Smashing Magazine Author
The beginning.
2011, Joined
Worked mostly with (web) apps. ! • Architecture • Performance
issues • UX • Mobile
What’s web app?
None
Multidevice World
None
Übermegamultidevice World!
How about RWD?
Yeah, suuuuure…
Simplest cross-platform web app flow
Page #1 Module #1 Module #5 Module #2 Module #3
Module #4 Desktop
Tablet Page #1 Module #1 Module #2 Module #3* Page
# Module
Mobile Page #1 Module #1* Module #2 Page #2 Module
#1* Module #3 Page #3 Module #1* Module #4
Wait, wait. Sure?
Research.
None
Like
jQuery Mobile: Flip Toggle
<select data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> jQuery Mobile: Flip
Toggle Example
<select name="flip-2" id="flip-2" data-role="slider" tabindex="-1" class="ui-slider-switch"> <option value="off">Off</option> <option value="on">On</option>
</select> ! <div role="application" class="ui-slider ui-slider-switch ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all"> <span class="ui-slider-label ui-slider-label-a ui-btn-active" role="img" style="width: 0%;">On</span> <span class="ui-slider-label ui-slider-label-b" role="img" style="width: 100%;">Off</span> <div class="ui-slider-inneroffset"> <a href="#" class="ui-slider-handle ui-slider-handle-snapping ui-btn ui-shadow" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="off" aria-valuetext="Off" title="Off" aria-labelledby="flip-2-label" style="left: 0%;"></a> </div> </div> jQuery Mobile: Flip Toggle Output
jQuery Mobile: Good Support
Dislike
Just a library. No architecture behind.
Performance.
None
Like
Ext.application({ name: 'MyApp', profiles: ['Phone', 'Tablet'] }); ! Ext.define('MyApp.profile.Phone', {
extend: 'Ext.app.Profile', ! views: ['Main'], ! isActive: function() { return Ext.os.is('Phone'); } }); Sencha Touch: Device Profiles
Dislike
Mobile only iOS, Android, BB, WP
Size matters
None
User don’t need the whole app from the start.
User don’t need the whole app at all.
None
Like
• Flexible • Small & Simple • Possibility to define
any architecture style
Dislike
• No architecture defined • No UI representation
Concept.
1. Independent customizable modules 2. Lazy loading 3. Device profiles
4. Device dependent templates 5. Easy UI elements
Device Profiles
XF.define(‘My App', function () { ! return new XF.App({ initialize:
function() { }, ! device: { types : [ { name : 'tablet', range : { max : 1024, min : 569 }, templatePath : 'tablet/', defaultAnimation: 'fade' }, !
XF.define(‘MyApp’, function () { ! return new XF.App({ ! device:
{ types : [ { name : 'ios', range : { max : 1024, min : 320 }, supports : ['isIOS'], templatePath : 'ios/', defaultAnimation: 'slideleft' }, !
Modules
Module View Collection Model Model Model
Module View Model
XF.define('componentClassName', function () { ! return XF.Component.extend({ Collection: XF.Collection.extend({ url:
'/rest/cities' }), // View Class === XF.View by default initialize: function() { // do some stuff here } }); ! });
XF.define('componentClassName', ['collections/collectionClass', 'collections/viewClass'], function (Collection, View) { return XF.Component.extend({ Collection:
Collection, View: View, initialize: function() { // do some stuff here } }); });
Module loading
<div data-component="componentClass" data-id=“componentID"> ! This text is visible while component
is loading ! </div>
<div data-component="componentClass" data-id="componentID" data-device-type="desktop"> ! This text is visible while
component is loading ! </div>
Customization
<div data-component="componentClass" data- id=“componentID"> ! <script> XF.setOptionsByID('componentID', {foo: 'bar'}); </script>
! </div>
Device-dependent templates
<div data-component="componentClass" data-id="componentID"> <script> XF.setOptionsByID('componentID', {foo: 'bar'}); </script> </div> components/componentClass.js
new ComponentClass(options); tmpl/deviceProfile/componentClass.tmpl tmpl/mobile/componentClass.tmpl // is visible rest/c
<div data-component="componentClass" data-id=“componentID" /> components/componentClass.js // is visible new ComponentClass(options);
tmpl/ deviceProfile/ componentClass.tmpl rest/componentClass/ // loading JS if it’s needed // rendering <div data-component="componentClass" data-id="componentID"> <ul class="xf-list" data-role="listview">
! Progressive Enhancement?
! Progressive Enhancement? Look ma, we still need backend
UI Elements
None
<ul data-role="listview"> <li data-role="divider">A</li> <li> <h2>Header</h2> <p>No link</p> </li> <li><a
href="#">Simple link</a></li> <li data-role="divider">Divider</li> <li> <h2>Header</h2> <p>Header and description</p> </li> </ul> Write Less
<ul data-role="listview" data-skip-enhance="true" id="xf-8293" class="xf-listview"> <li class=" xf-li xf-li-divider">A</li> <li
class="xf-li-static xf-li"> <div class="xf-li-wrap"> <h2 class="xf-li-header">Header</h2> <p class="xf-li-desc">No link</p> </div> </li> <li class=" xf-li"> <a href="#" class="xf-li-btn"> Simple link <div class="xf-btn-text"></div> </a> </li> <li class=" xf-li xf-li-divider">Divider</li> <li class=" xf-li"> <a href="#" class="xf-li-btn"> <div class="xf-btn-text"> <h2 class="xf-li-header">Header</h2> <p class="xf-li-desc">Header and description</p> </div> </a> </li> </ul> …do nothing
Wrapping up.
Pages.
What if page switching could work together with router?
<div class="xf-page" data-id="home">…</div> XF.define(function () { return new XF.App({ router:
{ routes: { '/': 'home' }, ! home: function() { // ... } },
Catching User Interactions
Touch Events Pointer Events Mouse Events D-Pad Events*
Touch Events Pointer Events Mouse Events D-Pad Events* tap swipe
Communication mechanics.
// if component is not loaded or constructed // events
will wait until it will be ! XF.trigger('component:componentID:eventName'); ! XF.trigger('component:componentClass:eventName'); Q of deferred
Proofing the concept.
tablet.govoyages.com
Release.
12000 employees, 20 years of experience, thousands of customers. No
chance for mistake.
Calm down, dude!
1. How to deal with open-source? 2. Legal Issues •
What type of licence? • Why this one? • Intellectual property?
Dec, 2013
xframeworkjs.org
Sugar.
Generator npm install generator-xf yo xf yo xf:application init
docs.xframeworkjs.org/
Future-proof.
XF ❤ Web Components
Yet another framework!
Yet another framework?
Software Engineer should be technology and solution agnostic. ! The
blind passion for the solution can ruin your growth as a professional.
Learn. Contribute. Build.
Thanks. ! @pukhalski