Menu hamburger icon

Posts for react


Comparing frameworks: Hello World!

Framework comparison

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.


Onsen UI 2.0 is here!

Onsen UI is here!

It’s been a little over four months since we released the first RC version of Onsen UI 2.0. Since then we have gone through several iterations, ironing out the creases in order to deliver a great UI solution for all hybrid and mobile web app developers out there.

Onsen UI is an UI framework & tools to create native mobile apps with HTML5 hybrid app technology. It is designed to make it easy and efficient for developers to design apps. We aim to make the UI components easy to use while still giving developers a lot of power to customize their behavior.


Getting Started with Meteor and Onsen UI

Onsen UI + Meteor

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.


Real time Chat App with OnsenUI and Horizon!

Horizon, RethinkDB and Onsen UI 2.0

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.


It's all about time: Building a performant Stopwatch with MobX and React - fast

MobX React Stopwatch

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.


It's all about time: Building a performant Stopwatch with MobX and React - fast

MobX React Stopwatch

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.


Onsen UI Angular 2 Components coming soon!

Onsen UI bindings

Recently it may have looked like we’ve been focusing mainly on React, but we have also worked hard on bringing you components and directives for Angular 2. Next week they will be available through both npm and Monaca CLI.

Onsen 1.x was based on Angular 1, but with Onsen 2 we decided to take a different approach. We separated the core logic and styles, so that it can be used with any framework. We also started working on wrappers, so that it can be used in a more natural way in the most popular frameworks.

AngularJS 1 have been supported for quite some time already. Recently we released React Components and next week it’s time for the long awaited Angular 2. We are very excited about this release and we hope you are as well!

We can’t wait to see the amazing apps you create when combining the rich collection of components of Onsen UI with the power of Angular 2.


Time Travel in React Redux apps using the Redux DevTools

Time Travel with the Redux DevTools

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.


Improving Your Development Workflow with Webpack, React Hot Loader and Onsen UI

Onsen UI Hot Reloading

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.


Building Cordova apps with React Components for Onsen UI

Onsen UI environment

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.


Navigation and Tabs in the Onsen UI React Extension

React Onsen UI

We just released docs for the React components: Check them out!

As seen in the previous blog post we have just announced a React extension for Onsen UI 2.0. It will provide all the Onsen UI custom elements in the form of React components.

In this article we will take a look at how some of the more complex components are used. Since this extension is still in development we would like to get all the feedback we can so we can refine the APIs and iron out all the creases.


Preview of React Components for Onsen UI 2.0

React Onsen UI

We just released docs for the React components: Check them out!

React has gotten immensely popular in the last couple of years. I don’t know how many times we have been asked if Onsen UI can be used with React or when we are going to add support for React. When we first announced Onsen UI 2.0 we promised that it will ship with React support and I am happy to say that we will fulfill that promise.

We have developed a collection of React components for Onsen UI 2.0. In this article we will take a look at some of them and show how they are used.


Tutorial: Create a Instagram Gallery App with Onsen UI + React

React Onsen UI

As you probably already know, Onsen UI is based on AngularJS. Nevertheless, many of our users asked if it’s possible to use it with other frameworks, especially React. In this tutorial, we will show you how to develop a very simple Instagram app by using Onsen UI and React. We will create a simple gallery using React and Onsen UI!

Although the current stable version of Onsen UI is 1.3.11, we will be using the development version of Onsen UI 2.0. We are getting close to releasing the alpha version and it is already quite stable. Onsen UI 2.0 is framework agnostic. It is no longer dependent on Angular, which means it integrates a lot better with other frameworks.