Jarv.us Showcase — SenchaCon 2011

  • 459 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
459
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

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
  • \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

Transcript

  • 1. jARV.USSPOTLIGHT Chris Alfano & Ryon Coleman @themightychris @ryon55
  • 2. Overview
  • 3. Overview SENCHA TOUCH EXTJS 4Eagles Draft 2011 Jarv.usConsumer Reports DynamicWear Christie’s GoLive.TV
  • 4. Philadelphia Eagles Draft 2011
  • 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. 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. 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. <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. ,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. ChallengesLessons Learned
  • 11. ChallengesLearn Sencha Touch and SASS theming :)Lessons Learned
  • 12. ChallengesLearn Sencha Touch and SASS theming :)Get and display live updatesLessons Learned
  • 13. ChallengesLearn Sencha Touch and SASS theming :)Get and display live updatesAdapt static images to different screen ratiosLessons Learned
  • 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. 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. 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. 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. 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. 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. .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. ChallengesLessons Learned
  • 22. ChallengesAccess native APIs for barcode scannerLessons Learned
  • 23. ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewLessons Learned
  • 24. ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history trackingLessons Learned
  • 25. ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history trackingAggregation of disparate data sources in a single viewLessons Learned
  • 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. 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. 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. 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. 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. ChallengesLessons Learned
  • 32. ChallengesRandom access thumbnail galleryLessons Learned
  • 33. ChallengesRandom access thumbnail galleryThird-party SOAP backendLessons Learned
  • 34. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesLessons Learned
  • 35. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingLessons Learned
  • 36. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingZoomable image carouselLessons Learned
  • 37. ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingZoomable image carousel(https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel)Lessons Learned
  • 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. 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. 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. ChallengesLessons Learned
  • 42. ChallengesPerformance on a HEAVY page full of imagesLessons Learned
  • 43. ChallengesPerformance on a HEAVY page full of imagesMake an animated dataview appear & init quicklyLessons Learned
  • 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. 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. 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. ChallengesLessons Learned
  • 48. ChallengesRealtime node.js integrationLessons Learned
  • 49. ChallengesRealtime node.js integrationMake page render immediately, then update with latest infoLessons Learned
  • 50. ChallengesRealtime node.js integrationMake page render immediately, then update with latest infoLessons LearnedSocket.IO is fun!
  • 51. ChallengesRealtime node.js integrationMake page render immediately, then update with latest infoLessons LearnedSocket.IO is fun!Old-school progressive enhancement = good practice
  • 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. Toolset & Workflow
  • 54. Toolset & Workflow Emergence framework TotalTerminal Dropbox Coda
  • 55. DOs and DON’Ts
  • 56. Wrangling Dependencies DO DON’T
  • 57. Wrangling Dependencies DO DON’TDefine requirements as close to their use as possible
  • 58. Wrangling Dependencies DO DON’TDefine requirements as close to their use as possibleUse Ext.create for all object instantiation
  • 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. 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. Custom BuildsDO DO!
  • 62. Custom Builds DO DO!Load your whole site on ext-core.js (sans manifest) for the auto-build script
  • 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. 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. 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. Page LoadingDO DON’T
  • 67. Page Loading DO DON’TCreate a minimal CSS file to load first—show that something is happening
  • 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. 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. Working with SASS DO DON’T
  • 71. Working with SASS DO DON’TExplore Ext’s default .scss files
  • 72. Working with SASS DO DON’TExplore Ext’s default .scss files Enjoy mixins, variables, color functions, nesting
  • 73. Working with SASS DO DON’TExplore Ext’s default .scss files Enjoy mixins, variables, color functions, nesting Be OCD about indentation!
  • 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. 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. 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. 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. 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. tHANK YOU! Chris Alfano & Ryon Coleman @themightychris @ryon55