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
450
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
280
50 Shades of Flux
pukhalski
3
360
Why Mobile Web Still Sucks
pukhalski
3
500
Responsive Typography: Wrap-Up
pukhalski
8
370
Next Level SVG
pukhalski
1
1.5k
XFramework: build cross-platform responsive web apps easily
pukhalski
3
870
Mobile Cross-Platform Development
pukhalski
2
290
Rest in PS: рабочий процесс современного веб-дизайнера
pukhalski
12
1.5k
Что сломалось в белорусском интернете?
pukhalski
4
500
Other Decks in Programming
See All in Programming
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
330
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.7k
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
130
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
qmuntal/stateless のススメ
sgash708
0
120
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
110
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
KATA
mclloyd
29
13k
Gamification - CAS2011
davidbonilla
80
5k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Visualization
eitanlees
144
15k
Agile that works and the tools we love
rasmusluckow
327
21k
Speed Design
sergeychernyshev
24
570
Designing the Hi-DPI Web
ddemaree
280
34k
Designing for Performance
lara
604
68k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
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