Onsen UI provides native-like styles for all the UI components that presumably work for most of the situations. However, sometimes we want to give our apps a personal touch in the shape of custom styles or animations. Let’s learn how to quickly implement custom “modifiers” to alter the style of our components in this article.

A couple of months ago we published an article on how to create a Pokedex application using Angular 2. Since then, the stable version of Angular 2 has been released and we have released the RC version of our Angular 2 bindings.

In this article we will use Onsen UI 2 and Angular 2 to create a simple mobile Pokedex app. We will use some of the code from the previous article, but we will integrate it with Onsen UI. We will also take a look at the Monaca CLI, which is a great tool for creating, debugging, and developing apps with Angular 2 and Onsen UI.

The fact that Onsen UI is built on top of Web Components makes us proud to be framework agnostic. However, there are so many options out there that we can feel overwhelmed when it comes to choosing a front-end framework to develop with. Especially for those who don’t have a large background in web programming, deciding which framework works better for them could be a tedious task.

Have you already chosen your framework to work with Onsen UI? For those who still don’t have a preference, in this article we show how to make a simple Hello World app with some of the existing alternatives: Vanilla JavaScript, AngularJS, Angular 2, React, Vue.js and Knockout.js.

This time, we have a special treat for all beginners who want to develop beautiful apps, but don’t know where to start. One of our Senior Software Engineers, Bryan Ellis, created a short Udemy course for those that need a little help getting started with Cordova app development. It takes less than 2 hours and is extremely easy to follow. Without any excuses, it’s time to build apps!

Onsen UI is a UI component library built on top of Web Components. Web Components is an emerging standard that is designed to make it easy to create reusable UI components using APIs that are native to the browser. One clear advantage of this is that the components that you make are not tied to a single library or frontend framework.

In this article we will take a look at the advantages of using Web Components and also at the Custom Elements v1 API that was recently finalized and is looking to become the de facto standard for registering and adding behavior to custom tags.

Web Components is in my opinion not only a technology for writing encapsulated components that can be plugged into our apps, it is also a way to help us stop reinventing the wheel and implement the same components for every framework or library out there.

Meteor is very well known as a full-stack framework that tremendously simplifies the creation of web apps. Thanks to Cordova we can also use Meteor for hybrid mobile apps and, after the last changes we made to our framework and bindings, we are excited to announce that you can find a robust Meteor Mobile UI framework in Onsen UI.

In this post we show you how to easily combine Meteor with Onsen UI to create beautiful looking mobile apps.

We recently launched the beta of our Angular2 components for Onsen UI. Angular2 is a brand new framework and people are just starting to get familiar with it. We have decided to start a series of articles to help people get started with the framework. This article is the first in the series and will explain the very basics such as how to set up the environment and how to create and run a simple app.

We will be using the newly released Angular2 CLI tool since it makes it very easy to get started without having to fiddle with things like Webpack and setting up the testing environment and linting.

Since this is the summer of Pokémon, I decided to create a simple sample app that displays a list of Pokémon. The data is fetched from the public PokeAPI. The API is open source and available on GitHub. Please give it a star if you like it! :)

The current app is very simple, all you can do right now is see pictures of all the Pokémon and what their name and number is. We will expand this app in a later article to add more features such as routing and searching.

A lot of modern apps like Twitter or Facebook work in real time: They update themselves when new information is available without the user pulling to refresh. With modern real time database like RethinkDB and the JavaScript Framework Horizon this task is as easy as writing any other JavaScript Application. In this tutorial we will build a simple chat app with MobX and the React Components for Onsen UI.

In this article we will take a look at how to create a Cordova hybrid app using Onsen UI and React. We will create a full-fledged weather application that uses Redux to manage the state and Onsen UI to create a beautiful UI.

In recent posts we spoke a lot about developing React applications with Redux: It enables the users to easily make testable and structured applications. However, writing a Redux application produces a lot of boilerplate code. One framework alternative is MobX, which solves this problem by doing automation using observables.

In the previous article we showed how to create a simple drawing application with React and manage the state of the app with a Redux store. Now we will talk about how to integrate the Redux DevTools to enable easy debugging and time travel.

The Redux DevTools records dispatched actions and the state of the Redux store at every point in time. This makes it possible to inspect the state and travel back in time to a previous application state without reloading the page or restarting the app.

In this post we will take a look at using Redux for managing the state in React apps. Redux is a very simple library that enables predictable atomic state changes. While the API is tiny and easy to learn, it gives you a lot of power and solves many of the problems when handling the application state and sharing data between components.

One of the great things about React is that there are a lot of tools and libraries available. One of the most popular is the React Hot Reloader by Dan Abramov, who also created Redux. The React Hot Reloader enables developers to make code changes and apply these changes without the application losing its state. In this tutorial we will build a small application step by step to demonstrate the power of Webpack and React and also show how OnsenUI users can benefit from it.

With Cordova it is easy to build functional hybrid apps for all the major mobile platforms, including Android, iOS and Windows Phone. However, making the apps look good is a much harder task. Luckily, with the help of the Monaca CLI and React Components for Onsen UI this became much easier. In this blog post we are going to look at some benefits of using these technologies.

There are many frameworks and concepts around in the JavaScript world. In today’s blog post we are going to write a pure mobile JavaScript application with Onsen UI and Redux, which is a very small but powerful library that enables to write JavaScript applications in a conceptually different way.

Redux is inspired by Flux, which was developed by Facebook. Unlike Flux, Redux is quite flexible and does not require any specific infrastructure like GraphQL. We will use Redux in combination with Onsen UI to build a simple Calculator mobile app. One of the nicest things about this app is that it will look native, both on Android and iOS, due to Onsen’s autostyle feature.

As we mentioned in a previous post, we just released a new killer feature called automatic styling for Onsen UI 2.0. This feature allows you to style your app for both iOS and Android automatically with little to no effort.

In this post we will explain how to make a sample To-Do app step by step using as many Onsen UI 2.0 features as we can: implementation in Vanilla JavaScript (framework agnostic), automatic styling, notification promises and combination of Navigator + Tabbar + Splitter (new sliding menu) in the same app.

ECMAScript 2015, commonly referred to as “ES6”, is the current version of the ECMAScript Language Specification standard. The support for this new ES6 features is on its way though it will take some time to be fully supported in modern browsers. This blog post will introduce how to use Babel, a JavaScript transpiler, for those who want to try out ES6 in advance.

Electron, formally known as Atom Shell, allows people to use web technologies to build cross-platform applications. Unfortunately, Electron hasn’t supported any Hybrid App Framework so here comes Onsen UI! In this blog post, we will try to integrate Onsen UI framework into a demo Electron app to see how it works.

In this tutorial we are going to learn how to use the Foursquare API and Google Static Maps API to create a Places App with Onsen UI and AngularJS. In this app we will be able to search for a particular place and filter the results by food, shops and outdoor places. There will be also an integrated static map which will lead to the Google Website once clicked.

Testing is very important for finding bugs, verifying the functionality and improving the general stability of a piece of software. Almost all (if not all) developers test their code in some way. One way to test would be to manually run the program and try out all the functions to see if everything is working as expected. Another (and better) way is to write automated tests that are run every time the code changes.

There are many options out there if you want to display charts in hybrid apps. Since a hybrid app is basically a web application running HTML, JavaScript and CSS, you can use any JavaScript charting library or you can even generate charts in a backend and display them as static images.

In this article we will take a look at NVD3 which are reusable charts based on the D3 data visualization library. We will see how it can be used to create a chart using pure JavaScript and also how the chart can be wrapped in an AngularJS directive.

In this tutorial, we will learn how to consume YouTube Data API v3 JavaScript from our hybrid app with an Onsen UI interface using AngularJS. We will be able to add YouTube functionality to play videos and show them on top of our Onsen UI elements very easily!

AngularUI Router is perhaps one of the most used modules out there for AngularJS that allows you to organize the parts of your interface into a state machine. Onsen UI doesn’t use URL routing but navigates from one page to another programmatically using the custom elements. However, since in ui-router we can define state transitions and not only URL routes we are able to combine Onsen UI and ui-router in the same app. Learn here how to do it.

Onsen UI has a wide set of premade themes, which cover a rich set of color combinations. Although the default colors look good, when creating an app with Onsen UI we recommend customizing the theme to give the app a personal touch. Branding is important since it differentiates your app from others and makes it easily recognizable.

How can the developer modify these themes, to give the Onsen UI components the desired colors? There are two ways to accomplish this.

The first one is to use our Theme Roller Tool, which provides, thanks to an intuitive graphical interface, an easy way to customize Onsen UI themes.

The second way to customize themes is by modifying and compiling the Stylus files. Using an automated gulp task and live reloading this approach also powerful and easier to integrate into a normal developer workflow.

As you know, last week we announced the new version of Onsen UI, which offers Windows Phone support. If you have missed it, take a look here. We promised updates and guides about the new tools implemented to develop hybrid applications compatible with Windows Phone 8.1. That’s why, in this tutorial, we will explain how to develop a Cordova app based on Onsen UI and compatible with Windows Universal platform, which includes Windows Phone 8.1.

Este artículo en español

CSS3 provides a way to create transitions between states with really smooth animations. When we want to modify the style of any element, usually changes are applied instantly. With transitions, this behavior is modifiable, allowing us to easily set not only how long does it takes to change but also the way it does with some simple directives. This customization will give us the possibility to change the look and feel of our applications by just including these easy to create transitions instead of inefficient JavaScript animations.

Este artículo en español

Hybrid mobile applications have become trendy in the last years. Writing native applications could be hard for casual developers, those who don’t know too much about programming and just want to make a simple app (or not so simple) as quickly as possible. It requires learning different programming languages (and different ways to interact with each device) for every platform where you want to deploy your application, although it certainly has some advantages: best possible performance, full access to the device hardware, etc.

This sample application has the purpose of demonstrate how to combine elements of Onsen UI, a framework for creating hybrid HTML5 apps, AngularJS, a JavaScript framework developed by Google, and Google Maps JavaScript API v3.

Hello, this is Ohto from the Onsen UI Team.

Today, we are going to create an AngularJS custom directive. This is a simple directive that wraps ngInclude. If you are looking for the basics about AngularJS, this blog post would be more helpful for you.　

Onsen UI comes with several themes to adjust the UI look for various types of apps. We are going to learn how to customize Onsen UI themes in this blog entry.

Part 3: Services

We are going to make an app with Onsen UI using AngularJS services.

Part 1: Basics

Since the official release of Onsen UI 1.0, we have been receiving more inquiries relating to AngularJS. Onsen UI is a front-end UI framework built on and optimized for AngularJS and Topcoat, which were developed by Google and Adobe respectively. This means that Onsen UI requires basic knowledge of AngularJS. Therefore, we are going to learn today the helpful basics of AngularJS to use Onsen UI.

Part 2: Click Events and DOM Manipulation

We are going to learn how to add click events within apps developed with Onsen UI. This blog entry is in response to frequently asked questions from users who are familiar with jQuery but not with AngularJS.

We are going to register click events to buttons, and dynamically change CSS classes of HTML elements.

Onsen UI supports font-awesome which has 369 icons! That’s alot but no matter how many icons provided, there is no gurantee that it will support your app icon’s need.