XFramework: the story so far

Transcript

1. Scalable Cross-platform Web Apps ! A long history of one

   solution

2. @pukhalski ! Solution Architect @ EPAM Systems Lecturer @ BHSAD

   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. None

8. Multidevice World

9. None

10. Übermegamultidevice World!

11. How about RWD?

12. Yeah, suuuuure…

13. Simplest cross-platform web app flow

14. Page #1 Module #1 Module #5 Module #2 Module #3

    Module #4 Desktop

15. Tablet Page #1 Module #1 Module #2 Module #3* Page

    # Module

16. Mobile Page #1 Module #1* Module #2 Page #2 Module

    #1* Module #3 Page #3 Module #1* Module #4

17. Wait, wait. Sure?

18. Research.

19. None

20. Like

21. jQuery Mobile: Flip Toggle

22. <select data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> jQuery Mobile: Flip

    Toggle Example

23. <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

24. jQuery Mobile: Good Support

25. Dislike

26. Just a library. No architecture behind.

27. Performance.

28. None

29. Like

30. 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

31. Dislike

32. Mobile only iOS, Android, BB, WP

33. Size matters

34. None

35. User don’t need the whole app from the start.

36. User don’t need the whole app at all.

37. None

38. Like

39. • Flexible • Small & Simple • Possibility to define

    
 any architecture style

40. Dislike

41. • No architecture defined • No UI representation

42. Concept.

43. 1. Independent customizable modules 2. Lazy loading 3. Device profiles

    4. Device dependent templates 5. Easy UI elements

44. Device Profiles

45. XF.define(‘My App', function () { ! return new XF.App({ initialize:

    function() { }, ! device: { types : [ { name : 'tablet', range : { max : 1024, min : 569 }, templatePath : 'tablet/', defaultAnimation: 'fade' }, !

46. XF.define(‘MyApp’, function () { ! return new XF.App({ ! device:

    { types : [ { name : 'ios', range : { max : 1024, min : 320 }, supports : ['isIOS'], templatePath : 'ios/', defaultAnimation: 'slideleft' }, !

47. Modules

48. Module View Collection Model Model Model

49. Module View Model

50. 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 } }); ! });

51. XF.define('componentClassName', ['collections/collectionClass', 'collections/viewClass'], function (Collection, View) { return XF.Component.extend({ Collection:

    Collection, View: View, initialize: function() { // do some stuff here } }); });

52. Module loading

53. <div data-component="componentClass" data-id=“componentID"> ! This text is visible while component

    is loading ! </div>

54. <div data-component="componentClass" data-id="componentID" data-device-type="desktop"> ! This text is visible while

    component is loading ! </div>

55. Customization

56. <div data-component="componentClass" data- id=“componentID"> ! <script> XF.setOptionsByID('componentID', {foo: 'bar'}); </script>

    ! </div>

57. Device-dependent templates

58. <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

59. <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">

60. ! Progressive Enhancement?

61. ! Progressive Enhancement? Look ma, we still need backend

62. UI Elements

63. None

64. <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

65. <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

66. Wrapping up.

67. Pages.

68. What if page switching could work together with router?

69. <div class="xf-page" data-id="home">…</div> XF.define(function () { return new XF.App({ router:

    { routes: { '/': 'home' }, ! home: function() { // ... } },

70. Catching User Interactions

71. Touch Events Pointer Events Mouse Events D-Pad Events*

72. Touch Events Pointer Events Mouse Events D-Pad Events* tap swipe

73. Communication mechanics.

74. // 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

75. Proofing the concept.

76. tablet.govoyages.com

77. Release.

78. 12000 employees, 20 years of experience, thousands of customers. No

    chance for mistake.

79. Calm down, dude!

80. 1. How to deal
 with open-source?
 2. Legal Issues
 •

    What type of licence? • Why this one? • Intellectual property?

81. Dec, 2013

82. xframeworkjs.org

83. Sugar.

84. Generator npm install generator-xf yo xf yo xf:application init

85. docs.xframeworkjs.org/

86. Future-proof.

87. XF ❤ Web Components

88. Yet another framework!

89. Yet another framework?

90. Software Engineer should be technology and solution agnostic. ! The

    blind passion for the solution can ruin your growth as a professional.

91. Learn. Contribute. Build.

92. Thanks. ! @pukhalski