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
460
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
380
Next Level SVG
pukhalski
1
1.5k
XFramework: build cross-platform responsive web apps easily
pukhalski
3
880
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
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
340
React への依存を最小にするフロントエンド設計
takonda
5
1.1k
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.2k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
CSC509 Lecture 11
javiergs
PRO
0
180
Realtime API 入門
riofujimon
0
150
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
240
Featured
See All Featured
Bash Introduction
62gerente
608
210k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Producing Creativity
orderedlist
PRO
341
39k
GitHub's CSS Performance
jonrohan
1030
460k
Code Review Best Practice
trishagee
64
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Designing for humans not robots
tammielis
250
25k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Making Projects Easy
brettharned
115
5.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
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