Community Code: Jarvus Innovations

Wednesday, November 2, 2011

Chris Alfano & Ryon Coleman@themightychris @ryon55

jARV.US SPOTLIGHT


Overview


Overview

SENCHA TOUCH

Eagles Draft 2011

Consumer Reports

Christie’s

EXTJS 4

Jarv.us

DynamicWear

GoLive.TV


Philadelphia Eagles Draft 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>

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;}


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>


,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);}


Challenges

Lessons Learned


ChallengesLearn Sencha Touch and SASS theming :)

Lessons Learned


ChallengesLearn Sencha Touch and SASS theming :)Get and display live updates

Lessons Learned


ChallengesLearn Sencha Touch and SASS theming :)Get and display live updatesAdapt static images to different screen ratios

Lessons Learned



Lessons LearnedDestroy DOM when you’re done with it



Lessons LearnedDestroy DOM when you’re done with itEstablish clear parameters for post-launch content



Lessons LearnedDestroy DOM when you’re done with itEstablish clear parameters for post-launch content-webkit-background-size


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);}


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




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);


.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) }}


Challenges

Lessons Learned


ChallengesAccess native APIs for barcode scanner

Lessons Learned


ChallengesAccess native APIs for barcode scannerLocked grid for comparison view

Lessons Learned


ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history tracking

Lessons Learned


ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history trackingAggregation of disparate data sources in a single view

Lessons Learned


ChallengesAccess native APIs for barcode scannerLocked grid for comparison viewComplex history trackingAggregation of disparate data sources in a single viewAnimated swipe-to-delete

Lessons Learned



Lessons LearnedDon’t use tabpanel



Lessons LearnedDon’t use tabpanelWrap card layout for history



Lessons LearnedDon’t use tabpanelWrap card layout for history-webkit-box and -webkit-transform3d


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');


Challenges

Lessons Learned


ChallengesRandom access thumbnail gallery

Lessons Learned


ChallengesRandom access thumbnail galleryThird-party SOAP backend

Lessons Learned


ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient types

Lessons Learned


ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm styling

Lessons Learned


ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingZoomable image carousel

Lessons Learned


ChallengesRandom access thumbnail galleryThird-party SOAP backendCustom gradient typesForm stylingZoomable image carousel(https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel)

Lessons Learned


https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel



Lessons LearnedDefer loading data until after screen is rendered





Lessons LearnedDefer loading data until after screen is renderedOverride mixins





Lessons LearnedDefer loading data until after screen is renderedOverride mixinsReusable list tpls and box layout




Challenges

Lessons Learned


ChallengesPerformance on a HEAVY page full of images

Lessons Learned


ChallengesPerformance on a HEAVY page full of imagesMake an animated dataview appear & init quickly

Lessons Learned



Lessons LearnedStack JS builds to minimize load times, avoid dupes



Lessons LearnedStack JS builds to minimize load times, avoid dupes“Stunt double” hack



Lessons LearnedStack JS builds to minimize load times, avoid dupes“Stunt double” hackLazy loading via data- attributes


Challenges

Lessons Learned


ChallengesRealtime node.js integration

Lessons Learned


ChallengesRealtime node.js integrationMake page render immediately, then update with latest info

Lessons Learned



Lessons LearnedSocket.IO is fun!



Lessons LearnedSocket.IO is fun!Old-school progressive enhancement = good practice


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); }}


Toolset & Workflow


Toolset & WorkflowEmergence framework

TotalTerminal

Dropbox

Coda


DOs and DON’Ts


Wrangling DependenciesDO DON’T


Wrangling Dependencies

Define requirements as close to their use as possible

DO DON’T




Use Ext.create for all object instantiation

DO DON’T





DO DON’T



Custom BuildsDO DO!


Custom Builds

Load your whole site on ext-core.js (sans manifest) for the

auto-build script

DO DO!


Custom Builds


auto-build script

Separate your classes from Ext classes into different builds

DO DO!


Custom Builds


auto-build script


DO DO!

Create builds on top of ext.js at milestones to reduce load

times


Custom Builds


auto-build script


DO DO!

Create builds on top of ext.js at milestones to reduce load

times

Mix compiled and static loading during development

for quick iteratoin


Page LoadingDO DON’T


Page Loading

Create a minimal CSS file to load first—show that

something is happening

DO DON’T


Page Loading



Load modernizr and any font loaders in the <head>

DO DON’T


Page Loading



Load modernizr and any font loaders in the <head>

DO DON’T

Load all of your JavaScript in the <head>


Working with SASSDO DON’T


Working with SASS

Explore Ext’s default .scss files

DO DON’T


Working with SASS


Enjoy mixins, variables, color functions, nesting

DO DON’T


Working with SASS



Be OCD about indentation!

DO DON’T


Working with SASS




Use Compass for CSS3 and tricky techniques

DO DON’T


Working with SASS





DO DON’T

Go too crazy with nesting


Working with SASS





DO DON’T


Battle defaults; instead work with the variables provided


Working with SASS





DO DON’T



Overdo it with ‘ui’ configs when regular classes will do


Working with SASS





DO DON’T



Overdo it with ‘ui’ configs when regular classes will do

Be afraid to line-by-line it


Chris Alfano & Ryon Coleman@themightychris @ryon55

tHANK YOU!


Community Code: Jarvus Innovations

Technology

Transcript of Community Code: Jarvus Innovations