Sencha Paris Meetup Switching from Titanium to Sencha Touch: a real life example

Transcription

1 Sencha Paris Meetup Switching from Titanium to Sencha Touch: a real life example Laurent Jolia Ferrier 12 June 2014

2 Foreword: I have always favoured development tools targeting several OSs with "one" code (LiveCode formerly Revolution, Xojo formerly REALSoftware, Titanium, Sencha Touch...)

3 Background and context Background A certified Titanium (Ti) developer since st mobile app (Obj C) Clostermann Several Ti mobile apps corinnelepage (ios) France Boissons (ios and Android) Time management and invoicing app (Android) Nagios front end (ios and Android)... My interest in Sencha Touch dates back to 2011

4 Background and context Context Client: public sector Several statistical brochures are produced every year (1000's of prints) Objectives Program the client's 1 st statistical app (kind of PoC) Reduce the # of prints Provide users with an enhanced experience (access to statistical data behind the charts, connections to relevant web sites, etc.)

5 Project main highlights Main targeted devices: ipad and Galaxy Tab 7' in "landscape" mode Tested so far on: Google Chrome, Galaxy Tab 2 7', iphone 3GS + ios6, iphone 4S + ios7, Wiko Oozie phone (Android) Same interface for all devices ("immersive" app as per Apple jargon) Extensive use of Sencha Charts (50 charts) Charts are build dynamically Charts' data is stored in JSON files (easy maintenance) "Portrait" and "landscape" modes A "Hamburger menu" function has been developed (approx. 25 CSS3 lines + 10 JS lines) An i18n function has been developed (1 model/store + less than 10 JS lines) All strings are in the i18n store Translation will be easy

6 Why Sencha Touch rather than Ti? Reasons against switching to Sencha Touch Excellent mastering of Ti Ti can make it Can Sencha Touch make it? Excellent integration of Ti with underlying OS (see SQLite databases or app variables for example) Native look and feel of Ti apps Speed of execution Lot of additional tools (see Appcelerator Cloud Services ACS or Facebook integration for example) Reasons for switching to Sencha Touch We didn't like Ti's recent development path No GUI design tool (UI defined in XML files) Compiler is being rewritten Additional tools lacking integration Sencha Architect Need of a charts' library anyway, and g raphael or Sencha Charts where likely options Google Chrome testing Ti's MVC framework a little bit cumbersome 'HTML5' and 'CSS3' (i.e. Sencha Touch) were magic words for the client No need of low level hardware functions (compass, camera, etc.)

7 Sencha Architect

8 Ti Studio

9 The good 1 st feedback: the good, the bad and the ugly? Sencha tools have proved they can 'make it' on this project The Sencha MVC model is outstanding once mastered (particularly as regards Models and Stores) Sencha Architect is a great tool that helps you keep your code clean The Sencha Charts module is extremely powerful Debugging in Google Chrome (Developer Tools + App Inspector for Sencha) is great (beware of ios and Android specificities/bugs though) Excellent integration of Sencha Touch with Android (better than with ios in most cases) Sencha's forums are a great source of information Some great books are available if you cannot take/afford a Sencha Touch training

10 The bad 1 st feedback: the good, the bad and the ugly? Workload grossly underestimated Forecast: 25 days Actual: [Much] more 81 hours (approx. 10 days) since May 26 th only (2.5 weeks) Impact on planning Coding started in February 2014 Should have taken 3 months (elapsed time) Will actually have taken 5 months (elapsed time) Main reasons Learning curve underestimated (same occured with 1 st Ti app) Lack of familiarity with the DOM (I am not a web developer initially) ios, Android and Sencha Touch bugs had to be learnt Some people told me that Sencha Touch was full of bugs At the beginning of the project I sometimes thought similarly Now I think that people who say so do not master Sencha Touch: there are actually very few bugs

11 The ugly? 1 st feedback: the good, the bad and the ugly? Sencha does not seem to be really interested in a few critical ios and Android bugs (most of them viewportrelated): users have to develop their own patches There is apparently an old old bug with scatter charts: the legend color for the scatter series is always black, no matter the color of the series (did you ever wonder why there is no Sencha Touch example of a scatter chart with a legend?)

12 Conclusion 1: a small wish list Correct or develop official patches for critical bugs Sencha Charts: scatter charts' legend issue Android: poor handling of 'orientationchange' event ios: problem when viewport dimensions expressed in 'vw' or in 'vh' Develop an upgrade policy For example allow developpers to move from Sencha Architect to Sencha Touch Bundle by paying only the difference of price between the two products Cheaper classes?

13 Conclusion 2: knowing what I now know... Would I do the same choices for this project? Yes. Shall I use Sencha Touch for my future mobile developments? As much as possible except if I need a greater integration with the underlying hardware (for example background execution)