Community Code: Jarvus Innovations

jARV.US SPOTLIGHT
Chris Alfano & Ryon Coleman
@themightychris @ryon55

Wednesday, November 2, 2011

Overview


Overview
SENCHA TOUCH EXTJS 4

Eagles Draft 2011 Jarv.us

Consumer Reports DynamicWear

Christie’s 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


Challenges
Learn Sencha Touch and SASS theming :)

Lessons Learned


Challenges
Get and display live updates

Lessons Learned


Challenges
Adapt static images to different screen ratios

Lessons Learned


Challenges

Lessons Learned
Destroy DOM when you’re done with it


Challenges

Lessons Learned
Establish clear parameters for post-launch content


Challenges

Lessons Learned
Establish 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 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.StackPanel


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


.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
Access native APIs for barcode scanner

Lessons Learned


Challenges
Locked grid for comparison view

Lessons Learned


Challenges
Complex history tracking

Lessons Learned


Challenges
Aggregation of disparate data sources in a single view

Lessons Learned


Challenges
Animated swipe-to-delete

Lessons Learned


Challenges

Lessons Learned
Don’t use tabpanel


Challenges

Lessons Learned
Wrap card layout for history


Challenges

Lessons Learned
Wrap 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
Random access thumbnail gallery

Lessons Learned


Challenges
Third-party SOAP backend

Lessons Learned


Challenges
Custom gradient types

Lessons Learned


Challenges
Form styling

Lessons Learned


Challenges
Form styling
Zoomable image carousel

Lessons Learned


Challenges
Form styling
(https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel)

Lessons Learned


Challenges
Form styling

Lessons Learned
Defer loading data until after screen is rendered


Challenges
Form styling

Lessons Learned
Override mixins


Challenges
Form styling

Lessons Learned
Override mixins
Reusable list tpls and box layout


Challenges
Performance on a HEAVY page full of images

Lessons Learned


Challenges
Make an animated dataview appear & init quickly

Lessons Learned


Challenges

Lessons Learned
Stack JS builds to minimize load times, avoid dupes


Challenges

Lessons Learned
“Stunt double” hack


Challenges

Lessons Learned
“Stunt double” hack
Lazy loading via data- attributes


Challenges
Realtime node.js integration

Lessons Learned


Challenges
Make page render immediately, then update with latest info

Lessons Learned


Challenges

Lessons Learned
Socket.IO is fun!


Challenges

Lessons Learned
Socket.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 & Workflow
Emergence framework

TotalTerminal

Dropbox

Coda


DOs and DON’Ts


Wrangling Dependencies
DO DON’T


DO DON’T

Deﬁne requirements as close
to their use as possible


DO DON’T

Deﬁne requirements as close
to their use as possible

Use Ext.create for all object
instantiation


DO DON’T

Deﬁne requirements as close Deﬁne requirements as close
to their use as possible to their use as possible

Use Ext.create for all object
instantiation


DO DON’T

Deﬁne requirements as close Deﬁne 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 instantiation


Custom Builds
DO DO!


Custom Builds
DO DO!

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


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 builds


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 builds


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 iteratoin


Page Loading
DO DON’T


Page Loading
DO DON’T

Create a minimal CSS ﬁle to
load ﬁrst—show that
something is happening


Page Loading
DO DON’T

Create a minimal CSS ﬁle to
load ﬁrst—show that

Load modernizr and any font
loaders in the <head>


Page Loading
DO DON’T

Create a minimal CSS ﬁle to Load all of your JavaScript in
load ﬁrst—show that the <head>

Load modernizr and any font
loaders in the <head>


Working with SASS
DO DON’T


Working with SASS
DO DON’T
Explore Ext’s default .scss ﬁles


Working with SASS
DO DON’T

Enjoy mixins, variables, color
functions, nesting


Working with SASS
DO DON’T

functions, nesting

Be OCD about indentation!


Working with SASS
DO DON’T

functions, nesting


Use Compass for CSS3 and
tricky techniques


Working with SASS
DO DON’T
Explore Ext’s default .scss ﬁles Go too crazy with nesting

functions, nesting


tricky techniques


Working with SASS
DO DON’T

Enjoy mixins, variables, color Battle defaults; instead work
functions, nesting with the variables provided


tricky techniques


Working with SASS
DO DON’T


Be OCD about indentation! Overdo it with ‘ui’ conﬁgs
when regular classes will do
tricky techniques


Working with SASS
DO DON’T


Be OCD about indentation! Overdo it with ‘ui’ conﬁgs
when regular classes will do
tricky techniques Be afraid to line-by-line it


tHANK YOU!
Chris Alfano & Ryon Coleman
@themightychris @ryon55


Community Code: Jarvus Innovations

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Sencha

Mais de Sencha (20)

Último

Último (20)

Community Code: Jarvus Innovations