Posts tagged Visual Studio

VS2015 Apache Cordova, Ionic and Typescript First Impressions

Happy days are here again! We got a new Visual Studio to play with and it’s got some amazing features for hybrid developers. If you, like everyone after Facebook said it couldn’t do a hybrid mobile app, thought hybrid app development was dead then boy oh boy you were wrong.

cordova-architectureIn the last year there has been more advancement in hybrid mobile app development then any other platform. Ionic is now the go-to hybrid development platform. Why? because it’s an opinioned UI and backend framework. This prevents “framework paralysis” and it’s super fast out of the box. The next big changes have been in tooling. Telerik’s AppBuilder is probably the best hybrid development toolchain out there and now we have Cordova development built right into VS2015.

Finally mobile operating systems like iOS and Android have far, far better built-in browsers that make hybrid applications far more capable and performant. Also in the case of Android where the eco-system is so fragmented we now have Crosswalk.

 

I’ve long been a fan of Telerik’s AppBuilder. Of all the native, hybrid and not so native mobile app development tool-chains I’ve used I believe it has the lowest friction for developers and the fastest feedback cycle. But that’s not to say it’s perfect. Not having a local build option can be a pain (it’s cloud build only and the local AppBuilder version has to match the server version exactly).

But now with VS2015 we have cross platform mobile app development built in with Apache Cordova Tools and C++ Cross Platform. So now I’m giving this a shot, to see if it can replace Telerik’s AppBuilder for hybrid development.

So now why would you want to have local Cordova builds at all? Normally I prefer cloud builds and for mainline development I still think it’s a good idea. But there are going to be cases where you need local builds. For example currently there is a Cordova Splashscreen bug that causes a black screen to appear only showing your splash screen for a split second. The fix for this is to not use the Splash Screen plugin but instead modify the underlying native project that wraps the hybrid application, basically set it’s background to the splash screen image. If your using a cloud build provider, your SOL, you can’t change that pop over to this site.

Another issue with cloud builds providers (or it could just be Telerik’s AppBuilder) is that they require the client tools version and server version to be the exact same versions. So if you got a few build servers, be prepared to a lot of NPM updating.

I’m using VS2015 RTM with all the Cordova tools installed. I have an older MacBook Pro which I’ve setup as a remote build host. Watch this video from the Ionic team about the initial setup and configuration.

You can install the Ionic Template from the Visual Studio Extensions gallery:

2015-08-03_11-18-50

Next I recommend using or taking a look at the Ionic TypeScript MDHA Starter project by Justin Credible on Github. It’s pretty overkill for most Ionic projects, but it’s a great starting point. Next what’s not included in Justin’s repo is some half decent TypeScript Definitions for Ionic. You can grab those from here, but they are a little dated but still work.

All in all this is a very good hybrid development experience and the tool-chain itself isn’t that difficult to setup and maintain. Compare this to Xamarin where every part of the tool-chain is very fragile and needs to be updated in multiple spots. Where the experience falls down a little is the simulator. The default simulator is Ripple, which is ok. But I’ve experienced caching issues with it, not picking up the latest changes. Additionally unlike the AppBuilder simulator which utilizes the chrome debug tools you have to bounce back and forth between Ripple and VS to see the console or interact with the debugger.

Overall it’s a decent experience especially for new hybrid developers used to Visual Studio. With Ionic support built right in it’s the best experience on Windows for that development straight out of the Visual Studio box. I still recommend Telerik’s AppBuilder as overall the experience is pretty frictionless, but it costs money a fair amount of it. Telerik’s Platform costs $470 a year for the lowest tier. Or you can use PhoneGap Build at $120 per year. Or finally you can use MacInCloud and get a dedicated Mac for $240 per year and build everything locally (or pay nothing extra if you have your own Mac).

This is just another tool in the hybrid app development toolbox the price point is good (free with Visual Studio Community Edition 2015) with the exception of needed or renting a Mac.

Resgrid is a SaaS product utilizing Microsoft Azure, providing logistics, management and communication tools to first responder organizations like volunteer fire departments, career fire departments, EMS, search and rescue, CERT, public safety, disaster relief organizations, etc. It was founded in late 2012 by myself and Jason Jarrett (staxmanade).

Full Time .Net & Xamarin Development on a Mac Part 1

Recently I started working full time on a Xamarin app for my job at Paylocity and for Resgrid a fair amount of my development especially when traveling has been on a Macbook Pro. So I’m approaching my new Xamarin environment with my previous scars and while it’s fresh in my mind I’ll share my experiences.

xs-iconThis will be a multi part series about my experience utilizing a Mac in .Net/Xamarin workflow. In this first post we are going to talk about the base hardware configuration and setup.

So where do you start off? This can be a daunting question and lots of things come into play. But first things first, you need a development hardware. When your doing Xamarin development you have a number of computer usage scenarios you can work off of:

1.) Full Time Dev on the Mac with Windows in a VM utilizing 1 machine (a Mac). The benefit of this pattern is that you only have 1 box to work on. The drawback is that you will be utilizing a VM for the Win8/Visual Studio parts and memory/performance is a concern. Only iMac’s and Mac Pro’s get you above 16GB of RAM. I would recommend 32GB for VM scenarios, and remember the Mac isn’t so good at reclaiming memory.

2.) Utilizing the Mac as a build host for Xamarin and working on a Windows machine full time, utilizing 2 boxes (1 Windows PC and 1 Mac). The benefit of this is if your doing .Net work most of the time you will have a first class experience (native VS development) but when your using Xamarin and need the iOS simulator you will have to switch to the mac (this will break your developers flow and add friction).

3.) Windows for full time development and if iOS isn’t a priority (yet) or a light priority you can utilize just a Windows machine for primary development and then use a service like MacInCloud for iOS building and testing. Also note MacInCloud is great for Team City and other CI, saves you hardware and allows you to easily offload Team City to say Microsoft Azure without worrying about tunnels into your network to access LAN hardware.

So why a Mac with a Windows VM or have a Mac at all? Well first if your development any iOS/Apple applications/games, etc your are technically and legally required to have genuine mac hardware in the mix somewhere. So why no Windows box with a Mac VM? Apple doesn’t allow it, and Hackintosh’s have a very tricky relationship with updates and XCode.

What will you find is that the first scenario is the most popular. Some co-workers went to Xamarin Evolve and almost everyone was running around with a Mac Book Pro. All my Xamarin University class instructors have been utilizing that scenario as well. This is also the scenario I would recommend. This is because it will be the least amount of hardware to manage and maintain, and it will reduce development friction and prevent flow killing context switching.

So now what mac do you buy? First I’d shy away from any i5 processor, most of them only have 2 cores (4 virtual if you include Hyper Threading). An i7 Quad core will increase your overall speed, give the host machine and the VM enough physical cores to access (because of my IT/SysAdmin background I’m not a huge fan of doubling up CPU extensive workloads on Hyper Threaded virtual processors).

Next is RAM, oh Apple and hardware component price gouging. This can get tricky, depending on the .Net workload. If you require SQL Server and/or multiple versions of Visual Studio open (i.e. you have 2 major solutions that you need to work on at the same time) you will want a minimum of 32GB of RAM for the Mac. This limits you to an iMac/iMac Retina or Mac Pro (ouch). If you only need 1 instance of Visual Studio open at a time and you don’t need SQL Server for any heavy lifting (i.e. a database many gigs in size) then 16GB is a good RAM size.

For optimal operation with a 16GB RAM size I’d recommend a minimum of 4096GB for the Windows VM or 6144GB if you need more memory on the VM (i.e. extensive use of Windows resources, like IIS or installed services). Give your Mac a fair amount of room to breath and utilize an app like Memory Clean to track usage and reclaim memory. If you only need 16GB of ram a MacBook Pro is by far your best bet, giving your developers a great system and portability. If you need 32GB give your VM 16384GB and keep the rest for your mac.

Also if at all possible get the biggest SSD/Flash drive you can. Keep your VM size down to the minimum (i.e. for all your installed programs, swap space, and some extra) you need and utilize shared resources as much as possible (i.e. shared folders on the hard drive from the Mac). This will reduce VM and host system load and startup times. Additionally utilizing shared folders you can quickly edit files from the host system instead of having to spin up the VM.

Multiple system solutions may be cheaper (i.e. a 500 buck Windows box and a 500 buck Mac mini) from the initial cost, but don’t underestimate the hidden\long running costs. Your developers will constantly be fighting with connection issues, maintaining 2 operation systems that are on 2 separate boxes, maintaining 2 separate hardware platforms and switching systems and thus contexts all of which will add friction and slow down the pace of development.

In future posts I’ll delve into Virtualization products, configuration, apps, and issues.

Resgrid is a SaaS product utilizing Microsoft Azure, providing logistics, management and communication tools to first responder organizations like volunteer fire departments, career fire departments, EMS, search and rescue, CERT, public safety, disaster relief organizations, etc. It was founded in late 2012 by myself and Jason Jarrett (staxmanade).

Ionic Framework and Windows Phone 8 Debugging

I recently worked on updating the Resgrid Responder app to utilize Ionic as the UI framework and Angular for the backend JS code. You can read through the reasoning’s for the switch in our previous blog post on the subject. The downside is that unlike Kendo, Ionic doesn’t have native support for Windows Phone.

At Resgrid we have to try and support as many platforms and use cases as possible. Resgrid is a SaaS product deployed on Microsoft Azure, providing logistics and management tools to first responder organizations like volunteer fire, career fire, EMS, search and rescue, public safety, disaster relief organizations, etc. It was founded in late 2012 by myself and Jason Jarrett (staxmanade).

This (http://appfoundry.be/blog/2014/10/16/ionic-windows-phone/) is a great resource for utilizing Ionic for your WP8 app, but we discovered it was lacking in a few parts. So utilize the excellent blog post by Vincent Bouillart above to get you started.

In this blog post we will be utilizing the Visual Studio Tools for Apache Cordova CTP3 and Visual Studio 2013 Update 4. If your using Visual Studio 15 Preview the same should also work.

Once those are installed you can create a new project. Our current project utilizes Telerik AppBuilder, but we just copied over/referenced our existing codebase in this project. The issue with Telerik AppBuilder is there is no good way to get information back from the device for debugging.

I started with creating a new Cordova project in VS.

Pic1

After that I imported/ported over my code:

Pic2

The config.xml is your Cordova config, double click it to get into your Cordova settings view. Next setup your Cordova settings to match your existing project. You could overwrite the config.xml and plugins directory with your current data, but because we utilize AppBuilder and they use non-standard configs we have to ours by hand.

Pic3

Now we added in all of our plugins that we needed. Note on our box/VS this was a VERY slow process.

Pic4

Next I set the configuration to Windows Phone 8. For me Universal did not work properly, but WP8 did. I also ensured I was set to Debug.

Pic5

Now this is where I got lost. If you just debug on the device here you will get nothing! No output and to be honest my apps just crashed when they started up. But open up the project on your file system then navigate to the folder below:

bld\Debug\platforms\wp8

You should see another Visual Studio solution, this is the one that you will get debugging information from.

Pic6

When you open up this project this is where you will find the MainPage.xaml where you set:

this.CordovaView.DisableBouncyScrolling = true;

When you have your WP8 device hooked up now you can debug the app.

wp_ss_20141218_0001

If you open up the output window in Visual Studio you will now see error output (if you followed the above blog post).

Pic7

Debugging WP8 apps from the original VS project may work in the future, but as of right now you need to load up and use the bld\Debug\Platform\wp8 one.

Go to Top