IntroducingOnsen UI 2.0

Customizable and JS-Framework Agnostic UI Framework

Masa Tanaka, Founder of Monaca

About Me and the Team

• A HTML5 company based in Tokyo, Japan.
• Long-time Cordova enthusiast.
• Creator of Cordova-kun bot.
• Creator of Cordova-kun's Final Quest

Our Line-up

Cloud based dev suite for Cordova. Includes CLI, desktop app and browser-based IDE.

• Remote build for iOS, Android and Windows.
• Debugging and testing app.
• Push notifications, in-app update, encryption and more.

HTML5 UI framework for Cordova & mobile apps.

• Open-source project.
• Designed for iOS and Android.
• Framework agnostic.
• Onsen => 温泉 => Hot springs => SPA!

Introducing Onsen UI 2.0 RC

Available in Material and Flat Design

More than 50 UI components and interfaces.

Framework Agnostic

Web Components, React, Angular 1 and 2－altogether.

Web Components API

<ons-tabbar>
  <ons-tab label="Tab 1" page="tab1.html" active="">
  </ons-tab>
  <ons-tab label="Tab 2" page="tab2.html">
  </ons-tab>
</ons-tabbar>

<ons-template id="tab1.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Tab 1</div>
    </ons-toolbar>

    <p style="text-align: center;">
      This is the first page.
    </p>
  </ons-page>
</ons-template>
					

Angular 1 & 2 API

<ons-page ng-controller="PersonController as person">
  <ons-toolbar>
    <div class="center">Introduction</div>
  </ons-toolbar>

  <section style="margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; top: 330px; display: none; ">
    <p>What is your name?</p>
    <p>
      <ons-input modifier="underbar" ng-model="person.name" placeholder="Your name" float=""></ons-input>
    </p>
    <p>
      Hello, {{ person.name || 'stranger' }}!
    </p>
  </section>
</ons-page>
					

React API

var Ons = import('react-onsenui');

var MyPage = React.createClass({
  handleClick: function() {
    ons.notification.alert('Hello world!');
  },
  render: function() {
    return (
      <Ons.Page>
        <Ons.Toolbar>
          <div className="center">My app</div>
        </Ons.Toolbar>

        <Ons.Button onClick={this.handleClick}>
          Click me!
        </Ons.Button>
      </Ons.Page>
    );
  }
});

ReactDOM.render(<MyPage />, document.getElementById('app'));
					

Giro d'Italia Official App

Ranked #1 in App Store Italy downloads!

To Get started

Use Monaca CLI, the command-line tool for Onsen UI app.

# Install via NPM command.
$ npm install -g monaca

# Create from starter kit.
$ monaca create helloworld
? Choose a template category: (Use arrow keys)
> Onsen UI
  Onsen UI and Angular 1
  Onsen UI and Angular 2 (Coming soon)
  Onsen UI and React

$ monaca preview     # Run the app on browser.
$ monaca debug       # Run the app on your device using Monaca Debugger.

# Build and package app via Monaca Cloud.
$ monaca remote build

To use Monaca Debugger, simply download the app from Google Play Store or App Store.

From Here...

Please visit Onsen UI Website, or interactive tutorial.

And that's it!

Thank You!