WarsawJS Presentation

What is a hybrid application?

A hybrid application is an application built with web development skills: HTML5, CSS, JavaScript that are later packaged into a native container.

What is a hybrid application?

What exactly does that mean?

Why hire a developer for each platform when you can hire one developer and target all of them through HTML, CSS, and JavaScript? Well, the reality is a bit more complicated...

What is a hybrid application?

Advantages

• It is mostly cross-platform out of the box
• Gives you the opportunity to develop your ideas fast, really fast
• Any web developer, on any level, and after a short period of learning can become an app developer

What is a hybrid application?

What about performance?

Unfortunately, none of the frameworks I’m about to talk about can manage to give a fully native feel out of the box like you get when you develop...well...natively. They are definitely on their way there.

UI Frameworks

Recently there has been a fast growth in need of hybrid applications, and many companies understood it. In the last few years many UI frameworks joined the list, and many more are on the way, giving us a better, more efficient, more performant hybrid experience.

UI Frameworks

Ionic Framework

Advanced HTML5 mobile development framework and SDK.
Build incredible mobile apps with web technologies you already know and love. Best friends with AngularJS.

http://ionicframework.com/

UI Frameworks

OnsenUI

Custom Elements-Based HTML5 UI Framework for Building Your Mobile Front End.

http://onsen.io/

UI Frameworks

Mobile Angular UI

Mobile Angular UI is an HTML5 mobile UI framework that will let you use AngularJS and Bootstrap 3 for mobile app development.

http://mobileangularui.com/

UI Frameworks

Famo.us + AngularJS

The Famous Engine is a free and open source JavaScript rendering engine.

http://famous.org/

UI Frameworks

Is that all I should know?

Of course not!

The Command-Line Interface

Installing the Cordova CLI

The Cordova command-line tool is distributed as an npm package in a ready-to-use format. It is not necessary to compile it from the source.

        npm install -g cordova [ionic]
      

The Command-Line Interface

Create the App

Go to the directory where you maintain your source code and run a command such as the following:

        cordova create warsawjs com.warsawjs.helloworld WarsawJS
	      ionic start tabs --id="com.warsawjs.helloworld" \
  --appname="WarsawJS" warsawjs
      

The Command-Line Interface

Add Platforms

Before running any command-line tools, you need to install SDKs for each platform you wish to target.

        cordova platform add ios
	      ionic platform add ios
      

The Command-Line Interface

Develop the App

Start a local development server for app dev/testing.

        cordova serve
	      ionic serve
      

The Command-Line Interface

Run it

Use this to build, test, and run your apps.

        cordova build ios
	      cordova run ios --device|--emulator
	      ionic build ios
	      ionic run ios --device|--emulator
      

Expansion capabilities

A plugin is a package of injected code that allows the Cordova webview within which the app renders to communicate with the native platform on which it runs. Plugins provide access to device and platform functionality that is usually unavailable to web-based apps.