• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Community Code: Jarvus Innovations
 

Community Code: Jarvus Innovations

on

  • 1,890 views

Chris started programming in high school to support his gaming habits, and co-founded Jarv.us Innovations after dropping out of business school so he could keep playing. He started using ExtJS at ...

Chris started programming in high school to support his gaming habits, and co-founded Jarv.us Innovations after dropping out of business school so he could keep playing. He started using ExtJS at version 2 to build administration backends for websites, so when Sencha Touch was released that experience enabled him to quickly train and tool his web development team for building cross-platform mobile apps using the skills they’d already tuned. In addition to leading development at Jarv.us, Chris is the architect of the open-source Emergence platform and helps the Science Leadership Academy apply technology to building the ultimate School 2.0.

Ryon has practiced HTML and CSS ever since since elementary school, when his father brought home a photocopy of an HTML2 tutorial and set him up with a text editor and Netscape to tinker. He is a passionate follower of the latest markup and styling techniques, so designing Sencha Touch applications seemed like a natural fit. At Jarvus, a company started by some high school friends, he has had the opportunity to work with some high-profile clients, working their well-known brands into SASS and HTML5.

Statistics

Views

Total Views
1,890
Views on SlideShare
1,809
Embed Views
81

Actions

Likes
1
Downloads
19
Comments
0

2 Embeds 81

http://www.sencha.com 79
http://sencha.site 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Community Code: Jarvus Innovations Community Code: Jarvus Innovations Presentation Transcript

    • Wednesday, November 2, 2011
    • jARV.US SPOTLIGHT Chris Alfano & Ryon Coleman @themightychris @ryon55Wednesday, November 2, 2011
    • OverviewWednesday, November 2, 2011
    • Overview SENCHA TOUCH EXTJS 4 Eagles Draft 2011 Jarv.us Consumer Reports DynamicWear Christie’s GoLive.TVWednesday, November 2, 2011
    • Philadelphia Eagles Draft 2011Wednesday, November 2, 2011
    • 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>Wednesday, November 2, 2011
    • Stretchy backgrounds body { ! 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; }Wednesday, November 2, 2011
    • 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>Wednesday, November 2, 2011
    • <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?Wednesday, November 2, 2011
    • ,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); }Wednesday, November 2, 2011
    • Challenges Lessons LearnedWednesday, November 2, 2011
    • Challenges Learn Sencha Touch and SASS theming :) Lessons LearnedWednesday, November 2, 2011
    • Challenges Learn Sencha Touch and SASS theming :) Get and display live updates Lessons LearnedWednesday, November 2, 2011
    • Challenges Learn Sencha Touch and SASS theming :) Get and display live updates Adapt static images to different screen ratios Lessons LearnedWednesday, November 2, 2011
    • Challenges Learn Sencha Touch and SASS theming :) Get and display live updates Adapt static images to different screen ratios Lessons Learned Destroy DOM when you’re done with itWednesday, November 2, 2011
    • Challenges Learn Sencha Touch and SASS theming :) Get and display live updates Adapt static images to different screen ratios Lessons Learned Destroy DOM when you’re done with it Establish clear parameters for post-launch contentWednesday, November 2, 2011
    • Challenges Learn Sencha Touch and SASS theming :) Get and display live updates Adapt static images to different screen ratios Lessons Learned Destroy DOM when you’re done with it Establish clear parameters for post-launch content -webkit-background-sizeWednesday, November 2, 2011
    • Wednesday, November 2, 2011
    • 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); }Wednesday, November 2, 2011
    • StackPanel viewport CR.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.StackPanelWednesday, November 2, 2011
    • DOM destruction this.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);Wednesday, November 2, 2011
    • .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) } }Wednesday, November 2, 2011
    • Challenges Lessons LearnedWednesday, November 2, 2011
    • Challenges Access native APIs for barcode scanner Lessons LearnedWednesday, November 2, 2011
    • Challenges Access native APIs for barcode scanner Locked grid for comparison view Lessons LearnedWednesday, November 2, 2011
    • Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Lessons LearnedWednesday, November 2, 2011
    • Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Aggregation of disparate data sources in a single view Lessons LearnedWednesday, November 2, 2011
    • Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Aggregation of disparate data sources in a single view Animated swipe-to-delete Lessons LearnedWednesday, November 2, 2011
    • Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Aggregation of disparate data sources in a single view Animated swipe-to-delete Lessons Learned Don’t use tabpanelWednesday, November 2, 2011
    • Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Aggregation of disparate data sources in a single view Animated swipe-to-delete Lessons Learned Don’t use tabpanel Wrap card layout for historyWednesday, November 2, 2011
    • Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Aggregation of disparate data sources in a single view Animated swipe-to-delete Lessons Learned Don’t use tabpanel Wrap card layout for history -webkit-box and -webkit-transform3dWednesday, November 2, 2011
    • Wednesday, November 2, 2011
    • 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);Wednesday, November 2, 2011
    • Challenges Lessons LearnedWednesday, November 2, 2011
    • Challenges Random access thumbnail gallery Lessons LearnedWednesday, November 2, 2011
    • Challenges Random access thumbnail gallery Third-party SOAP backend Lessons LearnedWednesday, November 2, 2011
    • Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Lessons LearnedWednesday, November 2, 2011
    • Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Lessons LearnedWednesday, November 2, 2011
    • Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Zoomable image carousel Lessons LearnedWednesday, November 2, 2011
    • Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Zoomable image carousel (https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel) Lessons LearnedWednesday, November 2, 2011
    • Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Zoomable image carousel (https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel) Lessons Learned Defer loading data until after screen is renderedWednesday, November 2, 2011
    • Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Zoomable image carousel (https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel) Lessons Learned Defer loading data until after screen is rendered Override mixinsWednesday, November 2, 2011
    • Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Zoomable image carousel (https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel) Lessons Learned Defer loading data until after screen is rendered Override mixins Reusable list tpls and box layoutWednesday, November 2, 2011
    • Wednesday, November 2, 2011
    • Challenges Lessons LearnedWednesday, November 2, 2011
    • Challenges Performance on a HEAVY page full of images Lessons LearnedWednesday, November 2, 2011
    • Challenges Performance on a HEAVY page full of images Make an animated dataview appear & init quickly Lessons LearnedWednesday, November 2, 2011
    • Challenges Performance on a HEAVY page full of images Make an animated dataview appear & init quickly Lessons Learned Stack JS builds to minimize load times, avoid dupesWednesday, November 2, 2011
    • Challenges Performance on a HEAVY page full of images Make an animated dataview appear & init quickly Lessons Learned Stack JS builds to minimize load times, avoid dupes “Stunt double” hackWednesday, November 2, 2011
    • Challenges Performance on a HEAVY page full of images Make an animated dataview appear & init quickly Lessons Learned Stack JS builds to minimize load times, avoid dupes “Stunt double” hack Lazy loading via data- attributesWednesday, November 2, 2011
    • Wednesday, November 2, 2011
    • Challenges Lessons LearnedWednesday, November 2, 2011
    • Challenges Realtime node.js integration Lessons LearnedWednesday, November 2, 2011
    • Challenges Realtime node.js integration Make page render immediately, then update with latest info Lessons LearnedWednesday, November 2, 2011
    • Challenges Realtime node.js integration Make page render immediately, then update with latest info Lessons Learned Socket.IO is fun!Wednesday, November 2, 2011
    • Challenges Realtime node.js integration Make page render immediately, then update with latest info Lessons Learned Socket.IO is fun! Old-school progressive enhancement = good practiceWednesday, November 2, 2011
    • Wednesday, November 2, 2011
    • 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); } }Wednesday, November 2, 2011
    • Toolset & WorkflowWednesday, November 2, 2011
    • Toolset & Workflow Emergence framework TotalTerminal Dropbox CodaWednesday, November 2, 2011
    • DOs and DON’TsWednesday, November 2, 2011
    • Wrangling Dependencies DO DON’TWednesday, November 2, 2011
    • Wrangling Dependencies DO DON’T Define requirements as close to their use as possibleWednesday, November 2, 2011
    • Wrangling Dependencies DO DON’T Define requirements as close to their use as possible Use Ext.create for all object instantiationWednesday, November 2, 2011
    • Wrangling Dependencies DO DON’T Define requirements as close Define requirements as close to their use as possible to their use as possible Use Ext.create for all object instantiationWednesday, November 2, 2011
    • Wrangling Dependencies DO DON’T Define requirements as close Define requirements as close to their use as possible to their use as possible Use Ext.create for all object Use Ext.create for all object instantiation instantiationWednesday, November 2, 2011
    • Custom Builds DO DO!Wednesday, November 2, 2011
    • Custom Builds DO DO! Load your whole site on ext- core.js (sans manifest) for the auto-build scriptWednesday, November 2, 2011
    • Custom Builds DO DO! Load your whole site on ext- core.js (sans manifest) for the auto-build script Separate your classes from Ext classes into different buildsWednesday, November 2, 2011
    • Custom Builds DO DO! Load your whole site on ext- Create builds on top of ext.js core.js (sans manifest) for the at milestones to reduce load auto-build script times Separate your classes from Ext classes into different buildsWednesday, November 2, 2011
    • Custom Builds DO DO! Load your whole site on ext- Create builds on top of ext.js core.js (sans manifest) for the at milestones to reduce load auto-build script times Separate your classes from Ext Mix compiled and static classes into different builds loading during development for quick iteratoinWednesday, November 2, 2011
    • Page Loading DO DON’TWednesday, November 2, 2011
    • Page Loading DO DON’T Create a minimal CSS file to load first—show that something is happeningWednesday, November 2, 2011
    • Page Loading DO DON’T Create a minimal CSS file to load first—show that something is happening Load modernizr and any font loaders in the <head>Wednesday, November 2, 2011
    • Page Loading DO DON’T Create a minimal CSS file to Load all of your JavaScript in load first—show that the <head> something is happening Load modernizr and any font loaders in the <head>Wednesday, November 2, 2011
    • Working with SASS DO DON’TWednesday, November 2, 2011
    • Working with SASS DO DON’T Explore Ext’s default .scss filesWednesday, November 2, 2011
    • Working with SASS DO DON’T Explore Ext’s default .scss files Enjoy mixins, variables, color functions, nestingWednesday, November 2, 2011
    • Working with SASS DO DON’T Explore Ext’s default .scss files Enjoy mixins, variables, color functions, nesting Be OCD about indentation!Wednesday, November 2, 2011
    • Working with SASS DO DON’T Explore Ext’s default .scss files Enjoy mixins, variables, color functions, nesting Be OCD about indentation! Use Compass for CSS3 and tricky techniquesWednesday, November 2, 2011
    • Working with SASS DO DON’T Explore 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 techniquesWednesday, November 2, 2011
    • Working with SASS DO DON’T Explore 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 techniquesWednesday, November 2, 2011
    • Working with SASS DO DON’T Explore 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 techniquesWednesday, November 2, 2011
    • Working with SASS DO DON’T Explore 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 itWednesday, November 2, 2011
    • tHANK YOU! Chris Alfano & Ryon Coleman @themightychris @ryon55Wednesday, November 2, 2011