Cordova or Xamarin developing iOS and Android programs with. Net

Visual Studio 2015 and Apache Cordova

Before you start, ask yourself the following questions:

• What is the percentage of developers skilled in web technology? (Percentage of all developers)

• What is the percentage of developers who are proficient in mobile development technology (and using cross-platform development tools)?

• What is the ratio of developers skilled in web technology and mobile development technology?

• What is the percentage of developers who are capable of developing across mobile platforms?

Due to learning time and career scope constraints, the final problem of qualified developers, few. In fact, few companies in the job market recruit the most versatile (people with a lot of skills) because they have a high salary but can't perform multiple tasks at once. As expertise continues to grow, so does a consultant's theory. Cross-platform tools like Apache Cordova (a set of cross-platform mobile device APIs) tend to rationally increase the last number.

Cross-platform Solution overview

When developing applications in Web browsers and mobile operating systems, we can use 3 major development tools. Unity (a professional game engine, multi-platform game development tool) is considered to be the closest development tool to native performance in video games. It has the advantage of high performance, but it also has a relatively difficult learning process. Xamarin (a cross-platform development framework designed to make mobile development simple), a mono (Novell development-based cross-platform · NET run environment) project, especially for the development tool of cost-effective. NET developers. It helps to put. NET Framework to the Microsoft foreign platform. The last one is Cordova, which has a learning cost of almost 0 and uses web development technologies similar to mobile applications for mobile and cross-platform applications.

Web	Cordova	Xamarin	Unity	Natif

Some development history

The Cordova project stems from the PHONEGAP project that Adobe has contributed 3 years ago (the former is the core code extracted from the latter, the core engine that drives the latter), and Adobe is famous for its multimedia-processing software package: PhotoShop, Illustrator (a vector image editing software), Premiere (a non-linear video editing software), and so on. Cordova is an open source project that Adobe has contributed to Apache in 2011, graduating from the Apache incubator in October 2012 and officially becoming the top project for Apache.

Back in April 2014, Microsoft released the 2nd update package for Visual Studio 2013, and in this update there was a new extension app, "Multi-Device Hybrid app (multi-device enabled)". It enables Visual Studio to better integrate Apache Cordova by using a new project type and a dependent installation tool. After the 1th update package was released, the Microsoft community received good feedback, and then the 2nd update package came up with this feature, with new features, better integration effects ...

More recently, in November 2014, when the Visual Studio 2015 preview was released, the Cordova extension was improved and renamed "Tools for Apache Cordova". You can now install Cordova directly through one of the options in the Visual Studio installation package. If the relevant option is selected, another installation step is triggered, which allows you to customize the tools you want to install: Ant,android,java,nodejs, and so on.

What does the Cordova achieve?

For a typical web site, it is impossible to get users through (in the past, that additional feature) only SMS and email standard phones. Cordova provides a new perspective for Web developers: the diversity of devices that can run applications, which is almost impossible to achieve before. Message alerts, geolocation, vibration, cameras, storage ... All of these features are beyond the scope of mobile development, but they are necessary, (Cordova) to help you achieve these features in a very efficient way.

To use web development techniques in a local environment, Cordova generates an application at compile time, which mainly handles two things:

• Integrated WebView components and browsers

• Package a list of resources that contain Web application files

Call the Cordova API in a Web page, just add very little code: introduce a virtual JS file, compile JS before it is available:

1	<scriptsrc="cordova.js"></script>

Finally, you can add a specific event trigger to monitor whether the API is available, whether the device is available:

1	document.addEventListener("deviceready", onDeviceReady, false);

2	functiononDeviceReady() { /* INIT */}

What are the new features of Visual Studio?

To improve the efficiency of Cordova cross-platform development, Visual Studio adds a new project type under the JavaScript and typescript directories.

In addition, Visual Studio uses an underlying file tree to initialize the development environment, and it also adds two new emulators.

Android Simulator

The first (simulator) is a new feature that is a replica of the Android SDK emulator: This is the Android emulator for Visual Studio. Now we can run and debug applications directly from Visual Studio on an Android device without installing the Android SDK emulator. In all of the optimizations, we found that the Android simulator started much faster than the Android SDK emulator. Of course, the Android emulator can also launch some APIs on the analog device, such as a GPS accelerometer.

Ripple Simulator

The second (simulator) is Ripple, which is also a product of Apache. Ripple was originally an extension app for Chrome to quickly test and enable the Cordova API. (later) Ripple is placed in a single chrome window, and Visual studio doesn't stop there. Once the emulator is started and the source code of the application is edited, it is possible to have the emulator automatically update the application to reduce the time that is normally spent resetting the debug environment.

Visual Studio should go further: it helps you deploy your application to a physical mobile device, allowing you to debug it just as easily as the application on the Debug emulator. Currently, there is still a problem with maintaining debug mode on an active physical mobile device. But the application has indeed been published on the mobile device and has been started. This bug has been made public and it will be repaired soon. Android,ios and Windows Phone, any level of web developers have to consider, and not just these. Cordova is not just for mobile apps, it's also useful for creating Windows apps and Ubuntu apps, which is important.

Focus Point

Cordova greatly helped web developers work, allowing developers to enter the mobile development environment for the first time without compromising their endurance. By the way, developers can maintain most of their work habits, especially in interactive design, and Cordova provides developers with a more flexible technique than "layout" to draw every desired scenario.

In addition, animation effects also need to be focused on, it is generally implemented in JavaScript to be compatible with most Web browsers. This is no longer necessary for a local application. You can specify a specific operating system version to determine the prerequisites, but do not specify an operating system that may use IE6 or IE7. On the other hand, for mobile devices, CPU performance and memory size are no longer as important as computers.

We should replace the "built-in" javascript-implemented animations with the CSS Transition (Apache Foundation Practice). Further, in order to avoid the "reflow" phenomenon (overloading or updating the DOM tree results in page performance degradation), it is best to use the new features of CSS3 to invoke the GPU. We can observe that when a DOM element changes in size, the browser will suddenly slow down as the browser calculates the effect of the change in the size of the element on the other elements of the page. Page performance can be improved by using the transition effect in the CSS3 transition attribute (defined with translate) instead of the top and left coordinate properties. Finally, when optimizing the DOM tree on the desktop side, it is generally not necessary to use JavaScript, which is more important on mobile devices.

For example, the following CSS can be compatible with many browsers, but its performance is low:

01	.slide.inactive {

02	transition: all0.5s ease-out;

03	-webkit-transition: all0.5s ease-out;

04	opacity: 0;

05	left: -100%;

06

}

07	.slide.active {

08	position: relative;

09	transition: all0.5s ease-out;

10	-webkit-transition: all0.5s ease-out;

11	opacity: 1;

12

left: 0;

13

}

The following, on the contrary, is slightly less compatible, but performs better because it does not cause reflow phenomena:

01	.slide.inactive {

02	transition: all0.5s ease-out;

03	-webkit-transition: all0.5s ease-out;

04	opacity: 0;

05	transform: translateX(-100%);

06	-webkit-transform: translateX(-100%);

07

}

08	.slide.active {

09	position: relative;

10	transition: all0.5s ease-out;

11	-webkit-transition: all0.5s ease-out;

12	opacity: 1;

13	transform: translateX(0);

14	-webkit-transform: translateX(0);

15

}

To go further, we should test with a front-end framework similar to iconic. Iconic has a self-introduction is more interesting:

The

pursuit of performance speed is important. It is only when you do not have this thing that you will find its importance. Iconic is doing very well on the latest mobile devices. With a minimum number of DOM operations, no jquery at all, and hardware-accelerated conversions, one thing is certain: iconic will impress you.

As a closing remark, we introduce a similar PowerPoint application implemented by Cordova, whose source code is stored in a GitHub repository.

Reference articles

• Http://www.visualstudio.com/en-us/explore/cordova-vs.aspx

• http://channel9.msdn.com/events/Visual-Studio/Connect-event-2014/511

• http://msopentech.com/blog/2014/09/25/apache-cordova-gains-windows-8-1-and-windows-phone-8-1-support-2-2/

• http://msopentech.com/blog/2014/05/12/apache-cordova-integrated-visual-studio/

• http://cordova.apache.org/#about

• http://blogs.msdn.com/b/visualstudio/archive/2014/11/13/ Tools-for-apache-cordova-update-ios-debugging-amp-windows-8-1-support.aspx

• http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/

• http://ripple.incubator.apache.org

This address: Http://www.oschina.net/translate/visual-studio-and-apache-cordova

Original address: Http://www.codeproject.com/Articles/860150/Visual-Studio-and-Apache-Cordova

Cordova or Xamarin developing iOS and Android programs with. NET