Scalable
Cross-platform
Web Apps
!
A long history of one solution
@pukhalski
!
Solution Architect @ EPAM Systems
Lecturer @ BHASD
Smashing Magazine Author
The beginning.
2011,
Joined
Worked mostly with (web) apps.
!
• Architecture
• Performance issues
• UX
• Mobile
What’s web app?
Multidevice
World
Ü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.
Like
jQuery Mobile: Flip Toggle
<select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
jQuery Mobile: Flip ...
<select name="flip-2" id="flip-2" data-role="slider"
tabindex="-1"
class="ui-slider-switch">
<option value="off">Off</opti...
jQuery Mobile: Good Support
Dislike
Just a library.
No architecture behind.
Performance.
Like
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});
!
Ext.define('MyApp.profile.Phone', {
extend: 'Ext.app....
Dislike
Mobile only
iOS, Android, BB, WP
Size matters
User don’t need
the whole app
from the start.
User don’t need
the whole app
at all.
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...
XF.define(‘MyApp’, function () {
!
return new XF.App({
!
device: {
types : [
{
name : 'ios',
range : {
max : 1024,
min : 3...
Modules
Module
ViewCollection
Model Model Model
Module
ViewModel
XF.define('componentClassName', function () {
!
return XF.Component.extend({
Collection: XF.Collection.extend({
url: '/res...
XF.define('componentClassName',
['collections/collectionClass',
'collections/viewClass'],
function (Collection, View) {
re...
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 compon...
Customization
<div data-component="componentClass" data-
id=“componentID">
!
<script>
XF.setOptionsByID('componentID', {foo: 'bar'});
</...
Device-dependent
templates
<div data-component="componentClass" data-id="componentID">
<script>
XF.setOptionsByID('componentID', {foo: 'bar'});
</scr...
<div data-component="componentClass" data-id=“componentID" />
components/componentClass.js
// is visible
new ComponentClas...
!
Progressive
Enhancement?
!
Progressive
Enhancement?
Look ma, we still need backend
UI Elements
<ul data-role="listview">
<li data-role="divider">A</li>
<li>
<h2>Header</h2>
<p>No link</p>
</li>
<li><a href="#">Simple ...
<ul data-role="listview" data-skip-enhance="true" id="xf-8293" class="xf-listview">
<li class=" xf-li xf-li-divider">A</li...
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'
},...
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:even...
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...
Learn.
Contribute.
Build.
Thanks.
!
@pukhalski
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
Upcoming SlideShare
Loading in …5
×

CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения

2,202 views
2,076 views

Published on

Published in: Internet, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,202
On SlideShare
0
From Embeds
0
Number of Embeds
300
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения

  1. 1. Scalable Cross-platform Web Apps ! A long history of one solution
  2. 2. @pukhalski ! Solution Architect @ EPAM Systems Lecturer @ BHASD Smashing Magazine Author
  3. 3. The beginning.
  4. 4. 2011, Joined
  5. 5. Worked mostly with (web) apps. ! • Architecture • Performance issues • UX • Mobile
  6. 6. What’s web app?
  7. 7. Multidevice World
  8. 8. Übermegamultidevice World!
  9. 9. How about RWD?
  10. 10. Yeah, suuuuure…
  11. 11. Simplest cross-platform web app flow
  12. 12. Page #1 Module #1 Module #5 Module #2 Module #3 Module #4 Desktop
  13. 13. Tablet Page #1 Module #1 Module #2 Module #3* Page # Module
  14. 14. Mobile Page #1 Module #1* Module #2 Page #2 Module #1* Module #3 Page #3 Module #1* Module #4
  15. 15. Wait, wait. Sure?
  16. 16. Research.
  17. 17. Like
  18. 18. jQuery Mobile: Flip Toggle
  19. 19. <select data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> jQuery Mobile: Flip Toggle Example
  20. 20. <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
  21. 21. jQuery Mobile: Good Support
  22. 22. Dislike
  23. 23. Just a library. No architecture behind.
  24. 24. Performance.
  25. 25. Like
  26. 26. 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
  27. 27. Dislike
  28. 28. Mobile only iOS, Android, BB, WP
  29. 29. Size matters
  30. 30. User don’t need the whole app from the start.
  31. 31. User don’t need the whole app at all.
  32. 32. Like
  33. 33. • Flexible • Small & Simple • Possibility to define 
 any architecture style
  34. 34. Dislike
  35. 35. • No architecture defined • No UI representation
  36. 36. Concept.
  37. 37. 1. Independent customizable modules 2. Lazy loading 3. Device profiles 4. Device dependent templates 5. Easy UI elements
  38. 38. Device Profiles
  39. 39. XF.define(‘My App', function () { ! return new XF.App({ initialize: function() { }, ! device: { types : [ { name : 'tablet', range : { max : 1024, min : 569 }, templatePath : 'tablet/', defaultAnimation: 'fade' }, !
  40. 40. XF.define(‘MyApp’, function () { ! return new XF.App({ ! device: { types : [ { name : 'ios', range : { max : 1024, min : 320 }, supports : ['isIOS'], templatePath : 'ios/', defaultAnimation: 'slideleft' }, !
  41. 41. Modules
  42. 42. Module ViewCollection Model Model Model
  43. 43. Module ViewModel
  44. 44. 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 } }); ! });
  45. 45. XF.define('componentClassName', ['collections/collectionClass', 'collections/viewClass'], function (Collection, View) { return XF.Component.extend({ Collection: Collection, View: View, initialize: function() { // do some stuff here } }); });
  46. 46. Module loading
  47. 47. <div data-component="componentClass" data-id=“componentID"> ! This text is visible while component is loading ! </div>
  48. 48. <div data-component="componentClass" data-id="componentID" data-device-type="desktop"> ! This text is visible while component is loading ! </div>
  49. 49. Customization
  50. 50. <div data-component="componentClass" data- id=“componentID"> ! <script> XF.setOptionsByID('componentID', {foo: 'bar'}); </script> ! </div>
  51. 51. Device-dependent templates
  52. 52. <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
  53. 53. <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">
  54. 54. ! Progressive Enhancement?
  55. 55. ! Progressive Enhancement? Look ma, we still need backend
  56. 56. UI Elements
  57. 57. <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
  58. 58. <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
  59. 59. Wrapping up.
  60. 60. Pages.
  61. 61. What if page switching could work together with router?
  62. 62. <div class="xf-page" data-id="home">…</div> XF.define(function () { return new XF.App({ router: { routes: { '/': 'home' }, ! home: function() { // ... } },
  63. 63. Catching User Interactions
  64. 64. Touch Events Pointer Events Mouse Events D-Pad Events*
  65. 65. Touch Events Pointer Events Mouse Events D-Pad Events* tap swipe
  66. 66. Communication mechanics.
  67. 67. // 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
  68. 68. Proofing the concept.
  69. 69. tablet.govoyages.com
  70. 70. Release.
  71. 71. 12000 employees, 20 years of experience, thousands of customers. No chance for mistake.
  72. 72. Calm down, dude!
  73. 73. 1. How to deal
 with open-source?
 2. Legal Issues
 • What type of licence? • Why this one? • Intellectual property?
  74. 74. Dec, 2013
  75. 75. xframeworkjs.org
  76. 76. Sugar.
  77. 77. Generator npm install generator-xf yo xf yo xf:application init
  78. 78. docs.xframeworkjs.org/
  79. 79. Future-proof.
  80. 80. XF ❤ Web Components
  81. 81. Yet another framework!
  82. 82. Yet another framework?
  83. 83. Software Engineer should be technology and solution agnostic. ! The blind passion for the solution can ruin your growth as a professional.
  84. 84. Learn. Contribute. Build.
  85. 85. Thanks. ! @pukhalski

×