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
470
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
290
50 Shades of Flux
pukhalski
3
370
Why Mobile Web Still Sucks
pukhalski
3
520
Responsive Typography: Wrap-Up
pukhalski
8
400
Next Level SVG
pukhalski
1
1.6k
XFramework: build cross-platform responsive web apps easily
pukhalski
3
910
Mobile Cross-Platform Development
pukhalski
2
300
Rest in PS: рабочий процесс современного веб-дизайнера
pukhalski
12
1.5k
Что сломалось в белорусском интернете?
pukhalski
4
500
Other Decks in Programming
See All in Programming
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
670
Exit 8 for SwiftUI
ojun9
0
130
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
400
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
170
Chrome Extension Techniques from Hell
moznion
1
160
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
150
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
160
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
340
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
670
Being an ethical software engineer
xgouchet
PRO
0
210
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
140
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
makicamel
4
280
Featured
See All Featured
Building Applications with DynamoDB
mza
94
6.3k
Automating Front-end Workflow
addyosmani
1369
200k
Optimizing for Happiness
mojombo
377
70k
Speed Design
sergeychernyshev
29
900
Music & Morning Musume
bryan
47
6.5k
Fireside Chat
paigeccino
37
3.4k
RailsConf 2023
tenderlove
30
1.1k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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