Sencha @ XeroWednesday, November 2, 2011
@storminwalkerWednesday, November 2, 2011
Who is Xero?          • Started             in 2006, IPO in June 2007          • Over              150 staff in 7 location...
Beautiful accounting                    softwareWednesday, November 2, 2011
Xero BusinessWednesday, November 2, 2011
The Xero Framework          • Pure   end-to-end SaaS development              framework designed from the ground up to    ...
XSLT & ASP.NET          • MVC-like    pattern              using ASP.NET as a              platform and XSLT as           ...
So where’s the ExtJS?Wednesday, November 2, 2011
Quick ExtJS architecture                           revision…Wednesday, November 2, 2011
The single page app…                              ExtJS                                J                                S ...
Progressive                              EnhancementWednesday, November 2, 2011
Wednesday, November 2, 2011
HTML              ExtJS                                                   J                                   H           ...
Why ExtJS?Wednesday, November 2, 2011
The Invoice GridWednesday, November 2, 2011
What we liked          • The               grid!          • Pretty              out-of-the-box          • Ability         ...
What we didn’t          • Wicked              learning curve          • Generated  HTML was pretty ugly              (heav...
Why not a single page app?          • Hybrid  approach has performance              benefits          • Minimizes          ...
Code!Wednesday, November 2, 2011
Code management          •Namespaces         following a folder              structure          •Coding   for reusability:...
Performance          •Sonic   (concatenate, minify,              compress)          •PreloadingWednesday, November 2, 2011
ThemingWednesday, November 2, 2011
Take ext-css &                        override the shit                            out of itWednesday, November 2, 2011
Xero TouchWednesday, November 2, 2011
Sencha Touch                                          J                                          S                        ...
Why Sencha Touch?          • Cross-platform          • Looks             native, feels native          • Faster,          ...
Focus on performance          •Destroy    often –              keep the DOM light          •Raw    HTML to the            ...
going nativeWednesday, November 2, 2011
•Native   Xero Touch for iOS &              Android (coming soon)          •18,000             app installs          •All ...
The move to ExtJS           4.0 & Sencha Touch                   2?Wednesday, November 2, 2011
Any questions?                                         www.xero.comWednesday, November 2, 2011
We’re hiring!Wednesday, November 2, 2011
Upcoming SlideShare
Loading in …5
×

Community Code: Xero

1,796 views

Published on

Craig Walker is Chief Technology Officer and co-founder of small business accounting software provider Xero. Xero has over 50,000 customers in over 100 countries and Craig has recently relocated to San Francisco to start the US based office.

Craig currently leads Xero’s software development technology strategy. He has a morbid obsession with JavaScript and not having to use any other language for development (much to the amusement of his colleagues).

Craig and Xero have been keen evangelists of Sencha products having utilized Sencha JavaScript libraries across Xero’s entire product line. Craig’s most recent fun project was building Xero Touch, a Sencha Touch-based mobile version of Xero released for the web and into the Apple App Store (and soon to be launched for Android).

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,796
On SlideShare
0
From Embeds
0
Number of Embeds
140
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Community Code: Xero

  1. 1. Sencha @ XeroWednesday, November 2, 2011
  2. 2. @storminwalkerWednesday, November 2, 2011
  3. 3. Who is Xero? • Started in 2006, IPO in June 2007 • Over 150 staff in 7 locations • Over 50,000 customers in 100 countries •A global business run from New ZealandWednesday, November 2, 2011
  4. 4. Beautiful accounting softwareWednesday, November 2, 2011
  5. 5. Xero BusinessWednesday, November 2, 2011
  6. 6. The Xero Framework • Pure end-to-end SaaS development framework designed from the ground up to be the platform for Xero HTML,  JavaScript ASP.NET 4.0/XSLT/ XSLT ExtJS ASP.NET Business  event  (transac$on)  engine C#/WCF Mul$-­‐dimensional  general  ledger Object  rela$onal  model LLBLGen Pro Mul$-­‐tenanted   data  model SQL Server 2008Wednesday, November 2, 2011
  7. 7. XSLT & ASP.NET • MVC-like pattern using ASP.NET as a platform and XSLT as the view engine • Allows our designers to incorporate their designs into the application without needing to be programmers • It’s all about painting screensWednesday, November 2, 2011
  8. 8. So where’s the ExtJS?Wednesday, November 2, 2011
  9. 9. Quick ExtJS architecture revision…Wednesday, November 2, 2011
  10. 10. The single page app… ExtJS J S O N ServerWednesday, November 2, 2011
  11. 11. Progressive EnhancementWednesday, November 2, 2011
  12. 12. Wednesday, November 2, 2011
  13. 13. HTML ExtJS J H S T O M N L HTTPHandler HTTPModule (authentication) ASP.NETWednesday, November 2, 2011
  14. 14. Why ExtJS?Wednesday, November 2, 2011
  15. 15. The Invoice GridWednesday, November 2, 2011
  16. 16. What we liked • The grid! • Pretty out-of-the-box • Ability to theme using pure CSS • Impressive component library • Object-oriented • Event subsystem • PerformanceWednesday, November 2, 2011
  17. 17. What we didn’t • Wicked learning curve • Generated HTML was pretty ugly (heavy DOM) • Theming was harder than expected • Lack of a distribution builder • Maintainability – very easy to write very bad code • PerformanceWednesday, November 2, 2011
  18. 18. Why not a single page app? • Hybrid approach has performance benefits • Minimizes that learning curve • Server side rendering for heavy pages (such as reporting) • Worked better across our large team • Unconstrained by the layout engineWednesday, November 2, 2011
  19. 19. Code!Wednesday, November 2, 2011
  20. 20. Code management •Namespaces following a folder structure •Coding for reusability: extend, componentize, encapsulate •Code broken into as small files as possible (both JS and CSS)Wednesday, November 2, 2011
  21. 21. Performance •Sonic (concatenate, minify, compress) •PreloadingWednesday, November 2, 2011
  22. 22. ThemingWednesday, November 2, 2011
  23. 23. Take ext-css & override the shit out of itWednesday, November 2, 2011
  24. 24. Xero TouchWednesday, November 2, 2011
  25. 25. Sencha Touch J S O N HTTPModule (authentication) ASP.NET MVCWednesday, November 2, 2011
  26. 26. Why Sencha Touch? • Cross-platform • Looks native, feels native • Faster, cheaper, easier to build with • CSS3 awesomeness using SASS & Compass • Ability to go nativeWednesday, November 2, 2011
  27. 27. Focus on performance •Destroy often – keep the DOM light •Raw HTML to the rescue •ALWAYS test on a real device!Wednesday, November 2, 2011
  28. 28. going nativeWednesday, November 2, 2011
  29. 29. •Native Xero Touch for iOS & Android (coming soon) •18,000 app installs •All Sencha Touch source disconnected from PhoneGap project •Access to native APIs: camera &Wednesday, November 2, 2011
  30. 30. The move to ExtJS 4.0 & Sencha Touch 2?Wednesday, November 2, 2011
  31. 31. Any questions? www.xero.comWednesday, November 2, 2011
  32. 32. We’re hiring!Wednesday, November 2, 2011

×