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
480
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
380
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
960
Mobile Cross-Platform Development
pukhalski
2
320
Rest in PS: рабочий процесс современного веб-дизайнера
pukhalski
12
1.5k
Что сломалось в белорусском интернете?
pukhalski
4
510
Other Decks in Programming
See All in Programming
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
MCPで実現できる、Webサービス利用体験について
syumai
7
2.4k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
750
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
実践!App Intents対応
yuukiw00w
0
110
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
710
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
250
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
720
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
階層化自動テストで開発に機動力を
ickx
1
470
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
800
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
GitHub's CSS Performance
jonrohan
1031
460k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Six Lessons from altMBA
skipperchong
28
3.9k
Designing for Performance
lara
610
69k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Raft: Consensus for Rubyists
vanstee
140
7k
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