Jarv.us Showcase — SenchaCon 2011

637 views

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
637
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Jarv.us Showcase — SenchaCon 2011

    1. 1. jARV.USSPOTLIGHT Chris Alfano & Ryon Coleman @themightychris @ryon55
    2. 2. Overview
    3. 3. Overview SENCHA TOUCH EXTJS 4Eagles Draft 2011 Jarv.usConsumer Reports DynamicWear Christie’s GoLive.TV
    4. 4. Philadelphia Eagles Draft 2011
    5. 5. Insta-style<!DOCTYPE html><html lang="en"><head> <style>body{background-color:#033}</style> <link rel="stylesheet" href="css/eagles-init.css+eagles-sencha.css+eagles-fonts.css+eagles-overrides.css" type="text/css"> <!-- ... --></head><body></body></html>
    6. 6. Stretchy backgroundsbody { background: url(../img/backgroundLogo.jpg) no-repeat center center #033; -webkit-background-size: cover;} /* OR */.storeCard { background: url(../img/storeCard.jpg) no-repeat center top; -webkit-background-size: contain;}
    7. 7. On-the-fly CSS & JS minifier<link rel="stylesheet" type="text/css" href="css/eagles-init.css+eagles-sencha.css+eagles-fonts.css+eagles-overrides.css" /><link rel="stylesheet" href="css/eagles2x.css" media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" /><script type="text/javascript" src="js/sencha-touch.js+app.js+views/*+models/TwitterProxy.js+models/*"></script>
    8. 8. <link rel="stylesheet" href="css/eagles-init.css?debug=1" type="text/css"><link rel="stylesheet" href="css/eagles-sencha.css?debug=1" type="text/css"><link rel="stylesheet" href="css/eagles-fonts.css?debug=1" type="text/css"><link rel="stylesheet" href="css/eagles-overrides.css?debug=1" type="text/css"><link rel="stylesheet" href="css/eagles2x.css" media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" /><script type="text/javascript" src="js/sencha-touch.js?debug=1"></script><script type="text/javascript" src="js/app.js?debug=1"></script><script type="text/javascript" src="js/views/AppViewport.js?debug=1"></script><script type="text/javascript" src="js/views/ArticleCard.js?debug=1"></script><script type="text/javascript" src="js/views/DraftCard.js?debug=1"></script><script type="text/javascript" src="js/views/LandingCard.js?debug=1"></script><script type="text/javascript" src="js/views/ProspectCard.js?debug=1"></script><script type="text/javascript" src="js/views/StoreCard.js?debug=1"></
    9. 9. ,startAutoRefresh: function() { this.autoRefreshInterval = setInterval( Ext.createDelegate(this.picksStore.load, this.picksStore) ,this.autoRefreshSeconds * 1000 );},onPicksLoaded: function(store, records, success){ if(this.isVisible() && this.liveDraft.isVisible()) this.seenPicks = records.length; else this.updateUnseen(records.length);},onDraftCardActivated: function() { this.markSeen();}    ,markSeen: function() { this.seenPicks = this.picksStore.getCount(); this.updateUnseen(this.seenPicks);}
    10. 10. ChallengesLessons Learned
    11. 11. ChallengesLearn Sencha Touch and SASS theming :)Lessons Learned
    12. 12. ChallengesLearn Sencha Touch and SASS theming :)Get and display live updatesLessons Learned
    13. 13. ChallengesLearn Sencha Touch and SASS theming :)Get and display live updatesAdapt static images to different screen ratiosLessons Learned
    14. 14. ChallengesLearn Sencha Touch and SASS theming :)Get and display live updatesAdapt static images to different screen ratiosLessons LearnedDestroy DOM when you’re done with it
    15. 15. ChallengesLearn Sencha Touch and SASS theming :)Get and display live updatesAdapt static images to different screen ratiosLessons LearnedDestroy DOM when you’re done with itEstablish clear parameters for post-launch content
    16. 16. ChallengesLearn Sencha Touch and SASS theming :)Get and display live updatesAdapt static images to different screen ratiosLessons LearnedDestroy DOM when you’re done with itEstablish clear parameters for post-launch content-webkit-background-size
    17. 17. Barcode scanning,onScanPress: function() { if(window.device) { window.plugins.barcodeScanner.scan( Ext.createDelegate(this.onBarcodeSuccess, this) ,Ext.createDelegate(this.onBarcodeFailure, this) ); } else { alert(barcode scanning is currently only available in native builds); }},onBarcodeSuccess: function(upc) { CR.views.viewport.executeBarcodeSearch(upc);}
    18. 18. StackPanel viewportCR.views.viewport.loadCard({ xtype: aboutpanel ,prevCard: this},{ // optional animation controls animate: slide ,direction: left ,reverse: false ,cover: false ,reveal: false // optional stack management ,clearStack: false // true to erase history stack ,clearAfter: false // pass a panel instance to clear any forward history}); https://github.com/JarvusInnovations/Jarvus.mobile.StackPanel
    19. 19. DOM destructionthis.on(beforeactivate, function() { this.setLoading(true);}, this, {delay: 10});this.on(activate, function() { if(this.loaded) { this.setLoading(false); this.list.refresh(); // redraw existing store contents } else { this.list.store.load({ scope: this ,callback: function() { this.setLoading(false); } }); }}, this);this.on(beforedeactivate, function() { this.list.update();}, this);
    20. 20. .x-list-item { .product { -webkit-box-align: stretch; -webkit-box-orient: horizontal; display: -webkit-box; overflow: hidden; & > div { -webkit-transition: -webkit-transform 250ms; } .delete-button-ct { -webkit-box-align: center; display: -webkit-box; margin-right: -85px; width: 85px; .x-button { -webkit-box-flex: 1; } } } &.confirm-delete .product > * { -webkit-transform: translate3d(-85px, 0, 0) }}
    21. 21. ChallengesLessons Learned
    22. 22. ChallengesAccess native APIs for barcode scannerLessons Learned
    23. 23. ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewLessons Learned
    24. 24. ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history trackingLessons Learned
    25. 25. ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history trackingAggregation of disparate data sources in a single viewLessons Learned
    26. 26. ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history trackingAggregation of disparate data sources in a single viewAnimated swipe-to-deleteLessons Learned
    27. 27. ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history trackingAggregation of disparate data sources in a single viewAnimated swipe-to-deleteLessons LearnedDon’t use tabpanel
    28. 28. ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history trackingAggregation of disparate data sources in a single viewAnimated swipe-to-deleteLessons LearnedDon’t use tabpanelWrap card layout for history
    29. 29. ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history trackingAggregation of disparate data sources in a single viewAnimated swipe-to-deleteLessons LearnedDon’t use tabpanelWrap card layout for history-webkit-box and -webkit-transform3d
    30. 30. Make it pop!@mixin background-gradient($bg-color, $type: $base-gradient) {... } @else if $type == supergloss { @include background-image( linear-gradient(color_stops( lighten($bg-color, 40%), lighten($bg-color, 15%) 50%, $bg-color 51%, lighten($bg-color, 5%) )) ); }...@include sencha-button-ui(action, darken($christies-red, 10%),supergloss);
    31. 31. ChallengesLessons Learned
    32. 32. ChallengesRandom access thumbnail galleryLessons Learned
    33. 33. ChallengesRandom access thumbnail galleryThird-party SOAP backendLessons Learned
    34. 34. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesLessons Learned
    35. 35. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingLessons Learned
    36. 36. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingZoomable image carouselLessons Learned
    37. 37. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingZoomable image carousel(https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel)Lessons Learned
    38. 38. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingZoomable image carousel(https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel)Lessons LearnedDefer loading data until after screen is rendered
    39. 39. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingZoomable image carousel(https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel)Lessons LearnedDefer loading data until after screen is renderedOverride mixins
    40. 40. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingZoomable image carousel(https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel)Lessons LearnedDefer loading data until after screen is renderedOverride mixinsReusable list tpls and box layout
    41. 41. ChallengesLessons Learned
    42. 42. ChallengesPerformance on a HEAVY page full of imagesLessons Learned
    43. 43. ChallengesPerformance on a HEAVY page full of imagesMake an animated dataview appear & init quicklyLessons Learned
    44. 44. ChallengesPerformance on a HEAVY page full of imagesMake an animated dataview appear & init quicklyLessons LearnedStack JS builds to minimize load times, avoid dupes
    45. 45. ChallengesPerformance on a HEAVY page full of imagesMake an animated dataview appear & init quicklyLessons LearnedStack JS builds to minimize load times, avoid dupes“Stunt double” hack
    46. 46. ChallengesPerformance on a HEAVY page full of imagesMake an animated dataview appear & init quicklyLessons LearnedStack JS builds to minimize load times, avoid dupes“Stunt double” hackLazy loading via data- attributes
    47. 47. ChallengesLessons Learned
    48. 48. ChallengesRealtime node.js integrationLessons Learned
    49. 49. ChallengesRealtime node.js integrationMake page render immediately, then update with latest infoLessons Learned
    50. 50. ChallengesRealtime node.js integrationMake page render immediately, then update with latest infoLessons LearnedSocket.IO is fun!
    51. 51. ChallengesRealtime node.js integrationMake page render immediately, then update with latest infoLessons LearnedSocket.IO is fun!Old-school progressive enhancement = good practice
    52. 52. Use iconCls for buttons.x-btn-icon { background-position: center center; background-repeat: no-repeat; &.shirts{ background-image: url(/img/icons/nav/shirts.png); } &.orders { background-image: url(/img/icons/nav/orders.png); } &.settings { background-image: url(/img/icons/nav/settings.png); }}
    53. 53. Toolset & Workflow
    54. 54. Toolset & Workflow Emergence framework TotalTerminal Dropbox Coda
    55. 55. DOs and DON’Ts
    56. 56. Wrangling Dependencies DO DON’T
    57. 57. Wrangling Dependencies DO DON’TDefine requirements as close to their use as possible
    58. 58. Wrangling Dependencies DO DON’TDefine requirements as close to their use as possibleUse Ext.create for all object instantiation
    59. 59. Wrangling Dependencies DO DON’TDefine requirements as close Define requirements as close to their use as possible to their use as possibleUse Ext.create for all object instantiation
    60. 60. Wrangling Dependencies DO DON’TDefine requirements as close Define requirements as close to their use as possible to their use as possibleUse Ext.create for all object Use Ext.create for all object instantiation instantiation
    61. 61. Custom BuildsDO DO!
    62. 62. Custom Builds DO DO!Load your whole site on ext-core.js (sans manifest) for the auto-build script
    63. 63. Custom Builds DO DO!Load your whole site on ext-core.js (sans manifest) for the auto-build scriptSeparate your classes from Ext classes into different builds
    64. 64. Custom Builds DO DO!Load your whole site on ext- Create builds on top of ext.jscore.js (sans manifest) for the at milestones to reduce load auto-build script timesSeparate your classes from Ext classes into different builds
    65. 65. Custom Builds DO DO!Load your whole site on ext- Create builds on top of ext.jscore.js (sans manifest) for the at milestones to reduce load auto-build script timesSeparate your classes from Ext Mix compiled and static classes into different builds loading during development for quick iteratoin
    66. 66. Page LoadingDO DON’T
    67. 67. Page Loading DO DON’TCreate a minimal CSS file to load first—show that something is happening
    68. 68. Page Loading DO DON’TCreate a minimal CSS file to load first—show that something is happeningLoad modernizr and any font loaders in the <head>
    69. 69. Page Loading DO DON’TCreate a minimal CSS file to Load all of your JavaScript in load first—show that the <head> something is happeningLoad modernizr and any font loaders in the <head>
    70. 70. Working with SASS DO DON’T
    71. 71. Working with SASS DO DON’TExplore Ext’s default .scss files
    72. 72. Working with SASS DO DON’TExplore Ext’s default .scss files Enjoy mixins, variables, color functions, nesting
    73. 73. Working with SASS DO DON’TExplore Ext’s default .scss files Enjoy mixins, variables, color functions, nesting Be OCD about indentation!
    74. 74. Working with SASS DO DON’TExplore Ext’s default .scss files Enjoy mixins, variables, color functions, nesting Be OCD about indentation! Use Compass for CSS3 and tricky techniques
    75. 75. Working with SASS DO DON’TExplore Ext’s default .scss files Go too crazy with nesting Enjoy mixins, variables, color functions, nesting Be OCD about indentation! Use Compass for CSS3 and tricky techniques
    76. 76. Working with SASS DO DON’TExplore Ext’s default .scss files Go too crazy with nesting Enjoy mixins, variables, color Battle defaults; instead work functions, nesting with the variables provided Be OCD about indentation! Use Compass for CSS3 and tricky techniques
    77. 77. Working with SASS DO DON’TExplore Ext’s default .scss files Go too crazy with nesting Enjoy mixins, variables, color Battle defaults; instead work functions, nesting with the variables provided Be OCD about indentation! Overdo it with ‘ui’ configs when regular classes will do Use Compass for CSS3 and tricky techniques
    78. 78. Working with SASS DO DON’TExplore Ext’s default .scss files Go too crazy with nesting Enjoy mixins, variables, color Battle defaults; instead work functions, nesting with the variables provided Be OCD about indentation! Overdo it with ‘ui’ configs when regular classes will do Use Compass for CSS3 and tricky techniques Be afraid to line-by-line it
    79. 79. tHANK YOU! Chris Alfano & Ryon Coleman @themightychris @ryon55

    ×