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.
11. Challenges
Lessons Learned
Wednesday, November 2, 2011
12. Challenges
Learn Sencha Touch and SASS theming :)
Lessons Learned
Wednesday, November 2, 2011
13. Challenges
Learn Sencha Touch and SASS theming :)
Get and display live updates
Lessons Learned
Wednesday, November 2, 2011
14. Challenges
Learn Sencha Touch and SASS theming :)
Get and display live updates
Adapt static images to different screen ratios
Lessons Learned
Wednesday, November 2, 2011
15. 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
Wednesday, November 2, 2011
16. 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
Wednesday, November 2, 2011
17. 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-size
Wednesday, November 2, 2011
23. Challenges
Lessons Learned
Wednesday, November 2, 2011
24. Challenges
Access native APIs for barcode scanner
Lessons Learned
Wednesday, November 2, 2011
25. Challenges
Access native APIs for barcode scanner
Locked grid for comparison view
Lessons Learned
Wednesday, November 2, 2011
26. Challenges
Access native APIs for barcode scanner
Locked grid for comparison view
Complex history tracking
Lessons Learned
Wednesday, November 2, 2011
27. 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 Learned
Wednesday, November 2, 2011
28. 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
Wednesday, November 2, 2011
29. 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
Wednesday, November 2, 2011
30. 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
Wednesday, November 2, 2011
31. 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-transform3d
Wednesday, November 2, 2011
34. Challenges
Lessons Learned
Wednesday, November 2, 2011
35. Challenges
Random access thumbnail gallery
Lessons Learned
Wednesday, November 2, 2011
36. Challenges
Random access thumbnail gallery
Third-party SOAP backend
Lessons Learned
Wednesday, November 2, 2011
37. Challenges
Random access thumbnail gallery
Third-party SOAP backend
Custom gradient types
Lessons Learned
Wednesday, November 2, 2011
38. Challenges
Random access thumbnail gallery
Third-party SOAP backend
Custom gradient types
Form styling
Lessons Learned
Wednesday, November 2, 2011
39. Challenges
Random access thumbnail gallery
Third-party SOAP backend
Custom gradient types
Form styling
Zoomable image carousel
Lessons Learned
Wednesday, November 2, 2011
40. 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
Wednesday, November 2, 2011
41. 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
Wednesday, November 2, 2011
42. 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
Wednesday, November 2, 2011
43. 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 layout
Wednesday, November 2, 2011
45. Challenges
Lessons Learned
Wednesday, November 2, 2011
46. Challenges
Performance on a HEAVY page full of images
Lessons Learned
Wednesday, November 2, 2011
47. Challenges
Performance on a HEAVY page full of images
Make an animated dataview appear & init quickly
Lessons Learned
Wednesday, November 2, 2011
48. 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
Wednesday, November 2, 2011
49. 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
Wednesday, November 2, 2011
50. 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- attributes
Wednesday, November 2, 2011
54. Challenges
Realtime node.js integration
Make page render immediately, then update with latest info
Lessons Learned
Wednesday, November 2, 2011
55. Challenges
Realtime node.js integration
Make page render immediately, then update with latest info
Lessons Learned
Socket.IO is fun!
Wednesday, November 2, 2011
56. 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 practice
Wednesday, November 2, 2011
63. Wrangling Dependencies
DO DON’T
Define requirements as close
to their use as possible
Wednesday, November 2, 2011
64. Wrangling Dependencies
DO DON’T
Define requirements as close
to their use as possible
Use Ext.create for all object
instantiation
Wednesday, November 2, 2011
65. 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
instantiation
Wednesday, November 2, 2011
66. 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 instantiation
Wednesday, November 2, 2011
68. Custom Builds
DO DO!
Load your whole site on ext-
core.js (sans manifest) for the
auto-build script
Wednesday, November 2, 2011
69. 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
Wednesday, November 2, 2011
70. 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
Wednesday, November 2, 2011
71. 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
Wednesday, November 2, 2011
72. Page Loading
DO DON’T
Wednesday, November 2, 2011
73. Page Loading
DO DON’T
Create a minimal CSS file to
load first—show that
something is happening
Wednesday, November 2, 2011
74. 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
75. 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
77. Working with SASS
DO DON’T
Explore Ext’s default .scss files
Wednesday, November 2, 2011
78. Working with SASS
DO DON’T
Explore Ext’s default .scss files
Enjoy mixins, variables, color
functions, nesting
Wednesday, November 2, 2011
79. 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
80. 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 techniques
Wednesday, November 2, 2011
81. 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 techniques
Wednesday, November 2, 2011
82. 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 techniques
Wednesday, November 2, 2011
83. 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
Wednesday, November 2, 2011
84. 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 it
Wednesday, November 2, 2011
85. tHANK YOU!
Chris Alfano & Ryon Coleman
@themightychris @ryon55
Wednesday, November 2, 2011