Menu hamburger icon

Posts for onsen ui


Create Awesome User Interfaces On Par With Popular Apps Using Onsen UI

For those may not know, Onsen UI offers a rich variety of UI components and tons of ready to implement features, specially designed for mobile apps. However, with all these possibilities one can’t help but be puzzled about how can all these components be combined to create an app. For that purpose, we in the Onsen UI team will show you how to use a combination of Onsen UI components to create a user interface pattern almost identical to the one of the popular music app Spotify!


Swipe to pop is now available! - Onsen UI 2.5.0

Onsen UI

The Onsen UI team has been working to provide you with exciting new features at every new release. Behold as here come some more!

In this article we introduce the features added in recent versions 2.4.0 and 2.5.0:

  • Swipe to pop (2.5.0)
  • Native <template> Support (2.4.0)
  • <script> in <ons-page> and Page Lifecycle Hooks (2.4.0)
  • Caching / Preloading External Templates (2.4.0)

Onsen UI has full Vue.js support!

Onsen UI and Vue.js

This is it. After months of grooming the Vue.js bindings to a sweet and stable spot, the Onsen UI team is happy to announce that our bindings for Vue.js are now available as a permanent product.

As the Vue community is growing bigger and bigger, if you were looking for the best mobile UI framework to build your Vue.js mobile apps with, look no further than this blog post. Just as simple, performant and powerful as Vue, keep reading to find out all about the added value Onsen UI can bring to your projects.


Creating Custom Modifiers

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.


Presenting Onsen UI's newest components

You may have happened to read our last blog post about some of the progress we have reached lately in Onsen UI. Well surprise surprise, that’s not all.

We want to take our hybrid app framework one step further, so besides all those recent updates about stability improvement in iOS and so on, in recent version 2.3.0 we have added brand new core components that you can start using right away.

Keep reading if you’d like to get acquainted with these new components.


Onsen UI 2.2.6: recent updates and iOS stability improvement

You may recall that 2 months ago (March 14) we released Onsen UI 2.2.0. Since then we have continuously worked hard to improve Onsen UI according to the feedback we’ve been receiving (e.g. GitHub issues). That effort culminated in the latest version, 2.2.6.

In this post we’d like to explain what the most recent updates of Onsen UI are all about.


Creating Twitter Single Sign On App with Monaca using Angular 1 and Onsen UI v2

Authentication and Profile Pages

In this article, you will learn how to use Twitter Single Sign On (SSO) with Monaca Cloud IDE using Angular 1 and Onsen UI. The authentication is done by using twitter-connect-plugin. This plugin uses Twitter’s Fabric SDK to enable SSO with your Android and iOS apps. After a successful authentication, the user’s basic information will be displayed in the app.


Start your Vue Mobile App Now. Onsen UI for Vue 2 Beta Release

Onsen UI and Vue.js

We are excited to announce that the Vue Components for Onsen UI beta version is finally out. vue-onsenui@2.0.0-beta.0 is now available on NPM and you can start creating Vue mobile apps with the power of Onsen UI. Vue UI for mobile devices made easy.

In this article we also show how to create a kitchen sink app that includes most of the components with and without Vuex.


Monaca CLI support for Onsen UI 2.2.0 and Vue 2

This week we have two news to announce. First of all, following the recent release of Onsen UI 2.2.0 now we also provide support for it in Monaca CLI version 2.2.0. Therefore, you can use transpirable frameworks Angular 2+ and React with the new Onsen UI and cssnext. Moreover, from now on, you can create Vue.js 2 project in CLI based on our standard templates: Minimum, Navigation, Splitter and Tabbar. The new Vue 2 templates support the 2.0.0-alpha.1 version of the Vue binding and the newest Onsen UI. Below we prepared a short tutorial that shows how to create a Vue 2 project in Monaca CLI.


Onsen UI 2.2.0 Release: CSS Upgrade

Onsen UI and Vue.js

Onsen UI 2.2.0 has been released! It comes with new features, some breaking changes and many bug fixes not only for the core, but for Angular, React and Vue bindings as well.

Together with Onsen UI, new versions of Monaca CLI and LocalKit will be released to support the latest changes.


Status of Vue 2 binding alpha and roadmap for beta

Onsen UI and Vue.js

It has been 4 weeks since we released 2.0.0-alpha.0. We know, we know, alpha is a scary tag. That’s why we’re looking to move on from it as fast as possible.

In this post we give you Vue developers the latest news regarding just that.

Obsolete methods of our Vue components in 2.0.0-alpha.1 and later

In 2.0.0-alpha.0 we provided not only props, events and slots but also methods as an API for interacting with and controlling our Vue components.

But since the use of methods does not come naturally because it does not follow the convention of Vue.js, we decided to obsolete the methods API in 2.0.0-alpha.1 and later.


Cordova plugins in Angular

Title

Hey you Angular developers. Even though Monaca is still to support Angular development in its Cloud IDE, there are some good news. Just about a month ago Cordova added type definitions (from DefinitelyTyped) to their core plugin repositories. So although that’s not released yet, you can already add those plugins to your Angular app.

This post shows you how to do that by means of a very simple example app. It assumes you’ve been using Monaca either through the command line (CLI) or the Localkit.


Onsen UI News & Roadmap

Onsen UI Roadmap

After a long time working on making Onsen UI framework agnostic and releasing bindings for Vue 2, React and Angular, we plan to give some love to the core library in the shape of new components and features. Discover here the next Onsen UI roadmap.


Creating a Pokémon hybrid app with Angular 2 and Onsen UI

Angular 2 Pokedex App

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.


Onsen UI with Vue 2 will soon be possible!

Onsen UI and Vue.js

Vue.js is a lightweight library used to create user interfaces. Its powerful but still intuitive API makes it very easy to learn. Vue has long been a favorite for us in the Onsen UI team and we know that some of our users are already creating apps using Vue and Onsen UI. We are happy to announce that we are currently working on adding better support.

Vue 2 was recently released and it looks very good. The API for creating components will stay almost the same as in the previous version, which makes migration very easy, but internally a lot of changes has been made to make the library more efficient.


New Udemy course for beginners: Build your Apache Cordova/PhoneGap app

Title

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!


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.


Create reusable and future-proof UI components with Custom Elements v1 and Web Components

Custom Elements is a part of Web Components

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.


Take part in Onsen UI 2.0 Tutorial Contest

Title

We recently released Onsen UI 2.0, which is framework-agnostic, supports both flat and material design, offers a rich collection of UI components and is just beyond beautiful and performant. Whoever has tried it was mesmerised, and in order to continue great development and gain better community support, we need your help spreading the word. And we will award your efforts!


Why Web Components Matter - Interview with Taylor Savage, Google’s Polymer Project

Taylor Savage!

Onsen UI 2.0 has just been released and Onsen users often focus on building mobile apps. But Onsen UI provides a full-stack ecosystem for developing beautiful cross-platform apps including web development. No matter your focus, we believe strongly in standards-based open source tools like Web Components. This is a fantastic way to future-proof your development environment as JavaScript development continues to expand from web to mobile platforms.


Meet us at AngularConnect in London

AngularConnect 2016

We are very proud to take part in Europe’s Largest Angular Conference, AngularConnect. Onsen UI Team is getting ready for a 2-day, multi-track conference that brings together world’s leading Angular experts, including the core Angular team at Google. If you are in London as well next week, make sure to get in touch with us (best through our community forum) and meet us there! See you on September 27th and 28th.


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.


Got a question? Ask us anything! Reddit IAMA session coming up soon!

All your questions will be answered during our Founder and CEO Masahiro Tanaka’s Reddit (I)AMA session

Reddit Onsen UI

Have questions about Monaca, Onsen UI, hybrid app development, flying planes, or life in Japan? Anything else? Our founder and CEO Masahiro Tanaka will be ready and available to answer all your questions on September 14th, at 1:30PM Pacific Time. Masa will be in San Francisco during the session, and you can check time date and time for your time zone here.


Inside Onsen UI: Web Components

Onsen UI and Web Components

Onsen UI 2.0 final release is around the corner. We’ve come a long way since we started implementing this version and we want to explain you here what were our reasons and issues. This is a short article that breaks down Onsen UI and some of the technologies behind it.


Giro d'Italia 2016 Official App - Most Downloaded App in the App Stores Created with Onsen UI

Giro D'Italia official Mobile App

Giro D’Italia, one of the world’s biggest bicycle races, is in full swing! While cyclists are restlessly hoping for the big win on May 29th, our team celebrates a win on our own: We were very honored to learn that the makers of the official Giro D’Italia app chose Onsen UI for creating this marvelous project.


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.


Building a Calculator App with Redux and Onsen UI

Redux and Onsen UI

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.


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.


Style your app automatically with Onsen UI

Automatic Styling

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.


Preview: New features in Onsen UI beta.7

Automatic Styling

The new beta version of Onsen UI 2.0 is out! Apart from several fixes and performance improvements, we are introducing a bunch of new features that will make you fall for Onsen UI 2.0 if you didn’t already. Automatic styling, new structure for list items, promises for asynchronous methods and more.

In this post we will briefly explain these new features and give some quick examples about how to use them. You can also see a live demo of these features implemented in Vanilla JavaScript.


What is Material Design?

I would like to take some time to expand on what Material Design is and the approach we have been taking when implementing it in the new version of Onsen UI.

In the previous version of Onsen UI, there was only one theme and it only tried to mimic the visual design of iOS. This is not a problem as long as you only target iOS, but since the app will look like an iOS app, the users might not feel at home when they run the app on an Android device. Things like the navigation bar, tabs, buttons all look completely different in iOS and Android. There are even some components that exist in Android that don’t even have a counterpart in the visual language of iOS native apps.

An important thing to note when talking about hybrid apps is that even though the developer might regard it as nothing but a web app, from a user’s perspective the app is actually more often compared to native apps since that is what the user is normally running on his or her device. In this case the user’s perspective more important. You should not be able to distinguish an ideal hybrid app from it’s native equivalent. Of course, it might be impossible to get the exact same performance from a hybrid app, but for the visual appearance it is possible to get very close. That is what we’re trying to do with Onsen UI. By adding Material Design we are getting one step closer to that ideal.

We have also gone one step further by adding automatic styles. What this means is that an Onsen UI app will use the Material Design components when running on the Android platform while it automatically switches to the flat design when running on iOS. This makes it possible to write truly hybrid apps where you can use not only the same JavaScript code on both platforms but even run the same HTML on Android and iOS and still give a close-to-native experience to your users.


Build a Places App with Foursquare and Google Maps using Onsen UI and AngularJS

OnsenUI-Places

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.


Monaca x Onsen UI American Roadshow

Monaca x Onsen UI US Roadshow 2016

Los Angeles, Dallas, Boston, New York City, Seattle

Get ready for us!

Our team is organizing a series of meetups throughout the United States. In addition to our presence at the PhoneGap Day US in Salt Lake City, we are kindly inviting you to join ur meetups in Los Angeles, Dallas, Boston, New York and Seattle. For information about each city, please check the links inside the article.


Monaca x Onsen UI Community Forum Release

Monaca x Onsen Community

The new version of Onsen UI is coming and we are paving the way. We are happy to announce that the new Monaca x Onsen UI Community Forum has been released! Many developers have requested a forum for Onsen UI and Monaca Tools where they could ask questions, share their progress, get community feedback and meet other developers. We hope you like it and join our brand new community!


Create your Kintone app using Monaca

Kintone by cybozu.com

Kintone by Cybozu lets you quickly and easily build your own customized business applications such as daily reports, minutes, time-card, and surveys. It also lets you create applications using Excel or CSV files to satisfy your own needs.

Kintone provides a lot of features in the web browser but here we focus on developing using Kintone API and Monaca to transform your custom business application into a hybrid mobile application.


Build a Hacker News Mobile App with Firebase

Firebase Logo

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.


Onsen UI 2.0 Preview: Responsive Hybrid Apps with the New Splitter Element

Onsen UI Splitter

The road that will bring us to Onsen UI 2.0 becomes more exciting every day. That’s why we are happy to introduce a new Onsen UI element: The <ons-splitter>!

The element has been developed with the purpose of offering even more UI customization than before, as well as making it easier to make responsive hybrid apps! With <ons-splitter> you can easily support both tablets and phones with the same code. The element will automatically transform depending on the size/orientation of the device. Wouldn’t it be great to support iPhone and iPad with the same code? With this element it’s not only possible. It becomes a simple task.

What are you waiting for? Let’s take a look at it and see what it has to offer!


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.


Material Design in Onsen UI

Onsen UI 2.0 Material Design

We have some exciting news for all of you developing hybrid apps for Android! Onsen UI 2.0 is adding Material Design!

Since Onsen UI hybrid app framework can be used to create apps for iOS and Android, it makes sense to provide native-like UI components for both platforms. That’s why we are currently implementing Material Design, adding new components alongside the current iOS based ones.

Many users have requested the Material Design support. We’ve listened to those voices and are working hard to make it available for you as soon as possible. Material Design is currently being implemented in parallell with Onsen UI 2.0, so get ready for native-like Android components included in the next major version.


Integrate Charts in your AngularJS Hybrid Apps with NVD3

D3.js

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.


Onsen UI Roadmap: New release and Onsen 2.0

Onsen UI Theme Customization

We would like to give you an update on what we’ve been working on lately and what we have in store for the future.

Onsen UI 1.3.4 was just released with a bunch of improvements. As we’ve mentioned earlier we’re also hard at work with the next major release of Onsen UI which will be version 2.0.

We’re really excited about this release and we hope you are too!


Tutorial: Onsen UI with ui-router

Onsen UI Theme Customization

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.


Follow Onsen UI at Angular U Conference!

Angular U

Dear followers, as many of you probably already know, this week, in San Francisco, the Angular U Conference 2015 will be held. For those of you who never heard of it, Angular U is an Angular conference covering Angular 1.x, 2, TypeScript, ECMAScript 6, Web Components and more. That’s why we couldn’t miss this event!

Andreas Argelius, core developer on Onsen UI and Monaca, will attend the event and talk about “Angular + Cordova + Monaca = Killer mobile app development”!


Onsen UI Templates for Visual Studio working on Windows Phone

Cordova + Onsen UI + Visual Studio1

We are releasing a set of Cordova + Onsen UI templates prepared to run on Windows Phone 8.1, so we now have a good way to develop for this platform using Onsen UI. These templates follow the Cordova App structure, what means that they are appropriate for Cordova CLI but also for the new Visual Studio 2015, as we will explain in this post. And to top it off, these templates are also available for TypeScript!


Tutorial: Customizing Onsen UI Themes

Onsen UI Theme Customization

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.


We are going to O'Reilly Fluent!

Conference

Dear followers, we are happy to announce that we will attend O’Reilly Fluent Conference 2015, this week! For those of you who never heard of it, the O’Reilly Fluent Conference is an event for developers working with JavaScript, HTML5, and other web technologies. Fluent covers the full scope of the Web Platform and its associated technologies, including WebGL, CSS3, mobile APIs, Node.js, AngularJS, ECMAScript 6, and more.


Tutorial: create a sample app with Windows Phone 8.1 and Onsen UI

Onsen Windows

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.


Onsen UI has been definitely typed! Developing with TypeScript

Definitely Typed Onsen UI 1.3

As part of the new utilities introduced in version 1.3, Onsen UI now supports TypeScript. Don’t worry, we won’t port Onsen UI to TypeScript, but we’ve got type definitions to support those who prefer a strongly typed development!

These definitions will inform you about the existing objects, functions and parameters while you develop with Onsen UI, and will automagically check that your app doesn’t mess up with function and variable types.


Onsen UI now supports Windows Phone 8.1!

Windows Phone

More hybrid and cross-platform than ever: your mobile apps developed with Onsen UI now run on Windows Phone!

Miscrosoft’s platform is getting popular and its popularity is expected to keep rising when Windows 10 arrives. Onsen UI will help you to reach this market with the same code that is already running on Android and iOS. You can now support three platforms with the same effort as supporting one would take!


Onsen UI 1.3 has been released!

Onsen UI 1.3

We are happy to announce that Onsen UI 1.3 has just been released! In the new version you will find not only bug fixes and improvements but also some awesome new features that will improve the experience of using Onsen UI. We also believe this is the most stable release of Onsen UI to date.

One of the main features introduced with this version of Onsen UI is a Window Universal (Windows Phone 8.1, Windows 8.1 and IE 11) partial support! We will release another blog post in the upcoming days describing exactly what this entails.

In this article we will introduce some of the main changes and additions in the framework. For a full list of changes, please refer to the Changelog.


Onsen UI App Showcase: Find Pet Partners with Petoom

Petoom is an original application made with Onsen UI that is becoming popular among people who want to find the proper partner for their beloved pets (dogs and cats).

The app allows the user to save its pet’s profile with information such as race, age and gender. Pictures and even copies of pedigree can be uploaded if desired.


Sneak Peeking 1.2.2: Pull Hook (or Pull to Refresh)

Pull Hook intro

As you know, we are entering the final stretch of the Onsen UI 1.2.2 release, that’s why, after the introduction of the Lazy Repeat feature, we want to introduce another new feature of this release. The Pull Hook feature can be accessed using the <ons-pull-hook> tag.

This feature is very convenient for fetching data from external sources (like a database, RSS feed or web API) into our application, when the user wants to check for updates. It is also a very convenient feature for the developer, since it allows to “hide” the fetching process of big amounts data with a nice graphical interface that gives to the user an impression of a shorter waiting time.


Sneak Peeking 1.2.2: Lazy Repeat (or Infinite Scrolling)

OnsenUI lazy-repeat

One of the features that the upcoming release of OnsenUI provides is the ons-lazy-repeat component. Frequently we need to load lists of elements that are large enough to slow down the app or even freeze it until the loading is finished, worsening the user experience. Here is where the new ons-lazy-repeat comes in.

ons-lazy-repeat will consider the item heights in order to display enough elements on the screen but wait to load the rest of them, thus improving the loading times and the user experience while avoiding possible problems for slower devices or connections. Further, at the same time it loads new elements that come into view, ons-lazy-repeat will also unload items when they are not visible anymore. With this approach, a list with millions of items can be rendered without a drop in performance.