Your SlideShare is downloading. ×
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,972
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
1,972
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×