Cross-Platform app development with PhoneGap, TypeScript and SVG Jan Zarnikov Irian Solutions
About me MSc in Software Engineering (TU Wien) Since 2010 @ Irian Solutions (mostly) Java-developer https://github.com/jzarnikov
Let s try something new... It s not always the right choice (or even an option).
The Challenge Mobile app to teach kids math Images: store.apple.com, play.google.com, versus.com
2 major issues Mobile app to teach kids math Images: store.apple.com, play.google.com, versus.com
2 major issues Mobile app to teach kids math 1 cross-platform Images: store.apple.com, play.google.com, versus.com
2 major issues Mobile app to teach kids math 2 1 graphics cross-platform Images: store.apple.com, play.google.com, versus.com
Our platform choice (the basis of PhoneGap) Images: www.w3c.org, cordova.apache.org
(Type) safety first (optional) static typing class-based OOP compiles to human-readable JS easy integration with JS libraries & tools Check out the TypeScript Playground!
TypeScript - compile-time checks Prevent type errors in your IDE: and your command-line tools:
TypeScript - classes & interfaces optional class-based single inheritance Is FrequentCustomer a Person? Matching by structure (duck typing)
TypeScript - closures & generics Generics - similar to Java Closures are everywhere! (async. nature of many JS libraries)
TypeScript - JS-Libs Type definitions: Type-safe usage:
Java Developers are spoiled Good, matured tools that work together (IDE, frameworks/libs, build, CI) Image: http://social4business.com/wp-content/uploads/2012/10/tools.jpg
TypeScript - tools Good support in or Type definitions for common JS-libs: http://git.io/0fdx-q and that s about it.
JavaScript - the Wild West 1.000s of libraries frameworks build tools and everything is v0.1.2 Image: http://www.gunstands.com/22-1186b.jpg http://www.fortwestern.com/charlie-1-horse-deuces-wild-felt-hat/p/429144/
Building it right 1. Compile TypeScript 2. Compile tests 3. Run Tests a. in browser b. head-less 4. Package 5. Deploy + Continuous integration Image: Chuck Norris Jenkins plugin
First attempt Currently not compatible with TypeScript-modules and Jasmine Images: www.gruntjs.com
Second attempt + custom plugin (compile, run tests ) + + Chrome Apps (based on Cordova)
gradle-typescript-plugin compile main/test run tests (in browser or headless) combine JS, uglify + full-featured sample project http://git.io/gradle-ts Image: www.github.com
Everybody hates pixels Vector graphics is the solution. Image: www.theverge.com
First attempt Render to SVG with RaphaelJS: var paper = Raphael(0, 0, 800, 600); var circle = paper.circle(200, 100, 50); circle.attr("fill", "black"); <html> <body> <svg width="800" height="600"> <circle cx="200" cy="100" r="50" fill="black" /> </svg> </body> </html>
Our workflow export em be d Static content Static images w dra implement Interaction mockups Designer Dynamic UI components Developer
First attempt - Results + Direct embedding of SVGs possible - SVG-rasterization too slow for animations (not even simple movement/scaling of objects) Image: en.wikipedia.org
Second attempt 1. <canvas> 2. Pre-rasterize SVGs with canvg (+ cache) 3. Render everything with EaselJS & TweenJS
Our workflow revised export em Static content be d Static images draw implement Interaction mockups re nd er Dynamic UI components export Animations Designer CreateJS MoveClip Generated JS code Developer <canvas>
Second attempt - Results Fast rendering Embedding of SVGs still possible Direct export of animations from Adobe Flash (generates CreateJS code!)
Summary
Summary TypeScript is great! But the tools not so much unless you write your own.
Summary TypeScript is great! But the tools not so much unless you write your own. Using vector graphics is hard, but doable. SVG rendering is slow, canvas is better.
Thank you for your attention! Questions?