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.

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.

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.

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.

Firebase provides a realtime Backend as a Service (or BaaS) that allows the developer to sync data instantly between the backend and all connected devices. In addition to being a database that’s accessible from anywhere, they also have a very useful JavaScript API that let’s you listen for events for when items are changed, added or removed from the database. The company was recently acquired by Google.

I’m very excited by the possibilities Firebase has for mobile apps. Using Onsen UI, AngularJS and Firebase I’ve made a simple app to illustrate how it can be used. Instead of creating my own database, I’ve used the Hacker News API since it already has a lot of data and new items are added frequently so we can try out the live syncing functionality in Firebase.

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.

After having introduced how to create a Simple App for Windows Phone 8.1 using Onsen UI, it’s time to demonstrate the potentialities of our framework with a new tutorial! This time we will create a Todo App with Onsen UI, using the services provided by Azure, to host our data, and the new Onsen UI Templates for Visual Studio 2015.

Recently we’ve started using the Web Components API for Onsen UI. The API gives the developer the power to create new tags and extend the HTML vocabulary. We’ve rewritten some of the simpler Onsen UI components as Web Components but we’re not going to stop at just that. The goal is to rewrite the core functionality of Onsen UI as Web Components and provide Angular 1.x support in the form of wrappers.

The reason why we’re doing this is that we don’t want the Onsen UI components to be usable only for AngularJS developers. We want you to be able to use Onsen UI regardless if you’re a Angular 1.x, React.js or a jQuery developer. We’re very excited about the upcoming Angular 2.0 as well which is built on top of Web Components standard.

In this tutorial we we’ll take a look at the API and implement a simple component. Let’s learn Web Components while making a “favorite button” / “favorite star”!

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.

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.