Jarv.us Showcase — SenchaCon 2011

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

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-ﬂy CSS & JS miniﬁer
<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 & Workﬂow
Emergence framework

TotalTerminal

Dropbox

Coda

Wrangling Dependencies
DO DON’T

DO DON’T
Define requirements as close
to their use as possible

DO DON’T
Define requirements as close
to their use as possible

Use Ext.create for all object
instantiation

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
instantiation

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 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 file to
load first—show that
something is happening

Page Loading
DO DON’T
Create a minimal CSS file to
load first—show that

Load modernizr and any font
loaders in the <head>

Page Loading
DO DON’T
Create a minimal CSS file to Load all of your JavaScript in
load first—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 files

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 files 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’ configs
when regular classes will do
tricky techniques

Working with SASS
DO DON’T


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

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

Jarv.us Showcase — SenchaCon 2011

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Jarv.us Showcase — SenchaCon 2011

Similar a Jarv.us Showcase — SenchaCon 2011 (20)

Último

Último (20)

Jarv.us Showcase — SenchaCon 2011

Notas del editor