sencha paris meetup switching from titanium to sencha...

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

Upload: phungthu

Post on 21-Jul-2018

222 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

Sencha Paris Meetup

Switching from Titaniumto Sencha Touch:

a real­life exampleLaurent Jolia­Ferrier

12 June 2014 

Page 2: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

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

Page 3: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

Background and context● Background

– A certified Titanium (Ti) developer since 2011

– 1st 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

Page 4: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

Background and context● Context

– Client: public sector

– Several statistical brochures are produced every year (1000's of prints)

– Objectives● Program the client's 1st 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.)

Page 5: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

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

Page 6: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

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

Page 7: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

Sencha Architect

Page 8: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

Ti Studio

Page 9: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

1st feedback: the good,the bad and the ugly?

● The good

– 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

Page 10: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

1st feedback: the good,the bad and the ugly?

● The bad

– Workload grossly underestimated

● Forecast: 25 days● Actual:

– [Much] more– 81 hours (approx. 10 days) since May 26th 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 1st 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

Page 11: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

1st feedback: the good,the bad and the ugly?

● The ugly?

– Sencha does not seem to be really interested in a few critical iOS and Android bugs (most of them viewport­related): 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?)

Page 12: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

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?

Page 13: Sencha Paris Meetup Switching from Titanium to Sencha ...files.meetup.com/3547912/sencha_paris_meetup_20140612.pdf · Sencha Paris Meetup Switching from Titanium to Sencha Touch:

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 theunderlying hardware (for example background execution)