I'm excited to try out CTP for multi-device mobile app development using Visual Studio. Microsoft seems serious about pursuing it further and as a mobile application developer I think it's awesome.
But one could easily get overwhelmed with steps involved to get going with Phone Gap. I used PhoneGap for Android little bit. Initially tried to use Eclipse editor (on Windows). I found Sublime Text to be a better option; It's light weight, got all required nuts and bolts (eg: auto-complete, extensions) and is fast. I used command line (mostly) for emulation.
Call me biased, on an Intel i7 machine, Eclipse crawls. Android emulators aren't any faster. They painfully take long time to start.
Visual Studio has always simplified development process. It's heavy too, but it simplifies so much that developer can focus on application rather than learning to use tools.
Quick Note: Visual Studio 2013 Update 3 is required for this plug-in to work.
CTP version 0.2 can be downloaded here. Run the installer and start Visual Studio, file/new project, under JavaScript you should see Multi-Device Hybrid App. (This will hopefully be renamed :D ) Select Blank App (Apache Cordova) from available templates.
As far as device emulators are concerned Android emulator is install-able on any Windows/Mac machine. For iOS you would need OSX Mavericks with XCode 5.1. Windows Phone emulator needs Windows 8 at least.
You could debug within Visual Studio by applying debug points on JavaScript code. In all my current JavaScript intensive applications, we use Chrome Dev Tools extensively. Being able to stop JS code for debugging within Visual Studio helps speed the debug process quite a bit.
Phone Gap/Corodova and background,
Phone Gap is a Hybrid platform that allows a mobile application be developed for multiple platforms like iOS, Windows Phone, Android so on. This allows one code base be maintained for apps on multiple mobile platforms.
Phone Gap code is written in HTML, JS and CSS. This runs it on a Web View on top of native application. Native features like Camera, Contacts etc can be accessed using Phone-Gap plug-ins
Phone Gap code is written in HTML, JS and CSS. This runs it on a Web View on top of native application. Native features like Camera, Contacts etc can be accessed using Phone-Gap plug-ins
Why do I like Visual Studio's Plug-In for Phone Gap
PhoneGap is an amazing framework for hybrid mobile app development with lots of plug-ins. These are Open Source, contributed by many developers all around the world, over a period of time.But one could easily get overwhelmed with steps involved to get going with Phone Gap. I used PhoneGap for Android little bit. Initially tried to use Eclipse editor (on Windows). I found Sublime Text to be a better option; It's light weight, got all required nuts and bolts (eg: auto-complete, extensions) and is fast. I used command line (mostly) for emulation.
Call me biased, on an Intel i7 machine, Eclipse crawls. Android emulators aren't any faster. They painfully take long time to start.
Visual Studio has always simplified development process. It's heavy too, but it simplifies so much that developer can focus on application rather than learning to use tools.
Setup
Quick Note: Visual Studio 2013 Update 3 is required for this plug-in to work.
CTP version 0.2 can be downloaded here. Run the installer and start Visual Studio, file/new project, under JavaScript you should see Multi-Device Hybrid App. (This will hopefully be renamed :D ) Select Blank App (Apache Cordova) from available templates.
When you build the project, it uses NodeJS. By the way Cordova itself is an npm package.
It also downloads Phone Gap plug-ins; Again, these allow the Web View of Phone gap to access native phone features. This is where a Phone Gap application becomes a native application as opposed to Web App downloaded on the phone.
Emulator
To my pleasant surprise Chrome browser is used for emulation of the mobile app. The default option when you build/run the project is launch with Ripple Plug-in.
It has quite a number of mobile browsers emulated.
It has quite a number of mobile browsers emulated.
Let's talk about Debugging
You could debug within Visual Studio by applying debug points on JavaScript code. In all my current JavaScript intensive applications, we use Chrome Dev Tools extensively. Being able to stop JS code for debugging within Visual Studio helps speed the debug process quite a bit.
Soon debugging on emulators in Mac Machine are also supported. Currently you could deploy to a mac machine and run the app, but won't be able to debug from Visual Studio. This hopefully will be available for real release.
Pain Points
Unfortunately there is no support for Visual Studio Express at this point.
For every change in code, project need to be rebuilt. It'll be nice to see auto update happening in the emulator, at least in Ripple. Ionic does this well. Web Browser refreshes as code is modified.
For every change in code, project need to be rebuilt. It'll be nice to see auto update happening in the emulator, at least in Ripple. Ionic does this well. Web Browser refreshes as code is modified.
At this stage if any npm package installation fails, it failed for good. You might have to install it manually. Considering this is a CTP release it's acceptable. If this problem makes it to real release purpose of the plug-in would be lost.
Temporary - Cordova doesn't seem to support spaces in folder names. Till this bug is fixed, you might have to create a folder without spaces (considering default location for Visual Studio has lot of spaces)
Sample Application
Here is a Hello World app (kind of) that use HTML5 navigator API and shows longitude and latitude of your current location. Do play around and let me know what you think. I'm planning to do more work on this Visual Studio Plug-In and share my thoughts soon.
No comments:
Post a Comment