Menu hamburger icon

Development


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.


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.


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.


Develop a Monaca Project with Visual Studio Code

Visual Studio Code

Visual Studio Code is an open source code editor developed by Microsoft and based on Electron, a framework allows creating desktop GUI applications using the Node.js.

Visual Studio Code comes with tons of features like debugging, Git integration, syntax highlighting, IntelliSense and more. It is also highly customizable. On top of that, Microsoft recently announced Cordova Tools for Visual Studio Code. With Cordova Tools extension, you can build, debug and preview Cordova hybrid mobile apps on Visual Studio Code.

With that in mind, in this blog post, we will quickly explain how to create a Monaca hybrid application using Microsoft’s Visual Studio Code with Cordova Tools.


Creating Monaca Applications With ES6

ES6 main

As many of you have probably already noticed, ECMAScript5 certainly lacks some pretty basic language features required during the development process. As a result, JavaScript alternative languages like CoffeeScript or TypeScript are being preferred by many developers as they both provide syntactic sugar on top of ES5.

To solve this problem, ECMAScript6 (ES6) brings a huge improvement over ES5, tackling many of the other core languages. As you may remember, we have already discussed how we can use ES6 using Babel in this blog post, today we will go deeper by creating a Monaca application with ES6.


Boost your Cordova Development with Monaca Power Plugins

Monaca Power Plugins

We are glad to announce our new feature plugins to boost your app development experience! With Monaca Power Plugins, we deliver developers the ability to secure their work with the latest security technologies. Additionally, we integrated In-App Purchases and Updates, leading to new development and business possibilities. Let’s immediately take a more detailed look at the latest updates!


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.


How-To-Guide: Monaca Cloud IDE with Git Integration

Monaca Cloud IDE now supports GitHub and Git operations. Git is software that helps the management process of source code. This type of software is better known as version control or source control. Some of the benefits that Git provides is full source code version history and cross collaboration with distributed development.

In this release, we support basic Git operations such as commit, push, pull, importing (clone), switching branches and tracking local history changes. Currently, we support only GitHub, one of the largest online Git repository hosting providers, as a remote repository provider but looking to expand the options in the future.

Let’s take a look at how you can start using Git immediately with your Monaca project.


LocalKit, Web IDE: Everything You Need to Know about Monaca Development Environment

As you probably already know, Monaca offers various development environment choices to fit all your needs. However, it may be difficult for a new developer to understand each one’s characteristics and which one to choose. That’s why in this blog post we would like to introduce each environment and their features, helping you to choose the right one for your development.

Monaca Development Platforms


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.


LokiJS: in-memory NoSQL datastore for Cordova apps

LokiJS

LokiJS is a lightweight JavaScript in-memory database made by Techfort that provides a document-oriented alternative to the already well known SQLite. For many applications a NoSQL approach could be more preferable than relational data when working with complex object stores. LokiJS gives us the chance to do this in a very efficient way.

LokiJS is intended to be used as an in-memory database with the possibility of persisting the data. It is compatible with Node.js (filesystem) and browsers, which means that it can be also used in our hybrid mobile Cordova apps (localStorage and indexedDB).


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.