UPDATE: The provided Vue boilerplate is now using Prisma and Auth0!

The serverless architecture is gaining more and more followers as new frameworks and services appear in the market. The most common monolith architecture was replaced by micro-services in many projects, which improved scalability but raised complexity. Recently, the latter gave way to the so-called serverless architecture.

Rather than deploying a whole server, now it is possible to worry only about custom code that runs at specific timing during the application. For instance, whenever a new user is registered in the DB, there will be a hook or event where a “send verification email” function can be called. All the backend code is split in functions (sometimes called cloud functions or lambda functions) that are managed and scaled automatically by third-party services.

This “new” tech has some huge advantages such as reducing cost or making traditional dev-ops almost unnecessary. However, it brings some drawbacks that not everybody is willing to face yet. As mentioned by Dmitri Zimine in his article “Serverless is cheaper, not simpler”, there is still a lot of wiring among serverless functions that increases complexity. That said, it is just a matter of time that new commercial services and best practices come up to fight back this complexity.

Apart from that, GraphQL has shown that it is here to stay and many big companies such as GitHub itself are switching their APIs from REST. GraphQL is a very expressive query language that can be sent directly from the client side. Instead of using different API endpoints to get chunks of data — from what we might only need a few lines — , GraphQL tools (e.g. Apollo) will send back the exact data that was specifically asked for in the query. It doesn’t necessarily replace REST but it is surely a technology you’d want to evaluate when starting a new project.

In this article, we will have a brief overview on existing serverless GraphQL solutions and how they can be combined with Vue.js to kick-start new projects.

Vue.js boilerplate

If you have read any of my previous articles you can already guess I love Vue.js (I lovue?). Recently, I found a very opinionated enterprise boilerplate made by Chris Fritz — who, by the way, recently launched a Patreon campaign — and thought it was pure gold. Check it out if you are a Vue developer and don’t know it yet.

I’ve made another repo starting from Chris’ project in order to add my own opinionated code such as components inside folders and some file distribution changes, including also template generators and docs. It can load components in plain files like my-menu.vue or inside their own directories like my-menu/index.vue without changing the import statement: import MyMenu from ‘@components/my-menu'. If you like that idea, you might want to have a look at it here. Again, props to Chris and the other contributors for this awesome project.

This version also includes GraphQL features such as query template generators and a way to easily organize and import queries. These changes are located in the appsync branch. Sneak peek here:

As you can see, queries and mutations can be imported just like an ES module (thanks to graphql-tag/loader).

It is still a work in progress and eventually I’d like to add better examples and use other cloud services. And also resolve some existential questions such as “To Vuex or not to Vuex” — there is already another state management solution for remote data provided by Apollo which can handle local state thanks to apollo-link-state. Check this introduction article by Peggy Rayzis for more information.

Serverless GraphQL solutions

As aforementioned, there are more and more commercial products — some of them open source! — that are coming up to deal with the serverless complexity.

Graphcool

The Graphcool project has been around for a while. It provides open source tools to easily create a managed backend that can be deployed using a CLI.

We just need to write a minimum GraphQL schema and Graphcool will create CRUD operations for us. It provides a set of hooks where we can call Lambda functions or webhooks whenever a mutation or query is performed. It can be deployed to the Graphcool cloud for a fully managed backend development.

Prisma

The Graphcool guys are recently focusing more on this product, Prisma, and just a few days ago they released an interesting cloud solution. Prisma will eventually become the core of the previous Graphcool project as well but, for now, it implements features that the other one doesn’t. Prisma is not a real serverless solution itself — it is just a layer that adds GraphQL to our DB — unless it is deployed by something like the Serverless Framework.

Therefore, it provides high flexibility that may be suitable for more projects. I̶ ̶h̶a̶v̶e̶n̶’̶t̶ ̶p̶l̶a̶y̶e̶d̶ ̶t̶o̶o̶ ̶m̶u̶c̶h̶ ̶w̶i̶t̶h̶ ̶i̶t̶ ̶m̶y̶s̶e̶l̶f̶ ̶y̶e̶t̶ ̶b̶u̶t̶ it certainly looks promising. And the best feature, it is also open source!

If you are interested in this, you can check this template which provides Vue integration with Prisma.

AWS AppSync

Amazon didn’t want to be late to the party and released a preview version of their own managed GraphQL solution last year: AWS AppSync. This product became publicly available very recently so there are still not many examples or articles about it.

Just like Graphcool and Prisma, AppSync also takes a schema and creates CRUD operations and subscriptions for us. Amazon, however, takes a slightly different approach here and uses its own client library rather than relying on other community tools (although it still uses Apollo internally). Thanks to that, they provide seamless integration with other AWS products like Cognito, DynamoDB or Lambda functions. If you are one of those AWS lovers this is great news for you, but it might be a drawback for some developers who prefer a different stack.

Since AppSync is quite new, let’s show here how we can easily add it to our Vue app.

Adding AWS AppSync to the stack

The Vue template provided here already includes AppSync and an example that uses it. However, it is easy to remove AppSync code and add plain apollo-client while still reusing all the structure and features included in the template. You just need to replace src/apollo.js file with your own setup. Also, beware that, since the queries and mutations are automatically generated by AppSync, your new service might use different naming conventions (e.g. getNotes instead of listNotes ).

To get started with AppSync you need an AWS account. Select AWS AppSync in the available products and you’ll be able to create a new API in just 1 click. Download the AppSync.json file provided in the main page of your newly created API and put it under src/AppSync.json after cloning the Vue template.

After that, change to the “Schema” section and add something like this:

type Note {
 id: ID!
 title: String!
 description: String
}

type Query {
 fetchNote(id: ID!): Note
}

schema {
 query: Query
}

This just created a very simple type Note and a query for it. Save this and click on “Create Resources”. This step will automatically spawn more queries, mutations and subscriptions for our schema and add DynamoDB tables for it. After creating them, you just need to modify the new schema and connect the new mutations and subscriptions:

schema {
 query: Query
 mutation: Mutation
 subscription: Subscription
}

Optionally, fetchNote query can be removed since AppSync generates a getNote query that does the same. Remember pressing “Save” again after these modifications.

That should be all the steps needed to get started with Vue + AppSync. If you correctly replaced the AppSync.json file in your project, you should be able to run yarn && yarn dev and play with it. All the queries are located in src/gql/note.gql , which you can also copy and use in AppSync online playground (under the “Queries” section). In case you want to add new queries, just run yarn new gql and input the name and location.

Extra resources:

• Video: AWS AppSync — Creating a Serverless GraphQL Backend
• Article: Full Stack Vue with GraphQL & AWS AppSync

Conclusion

Serverless and GraphQL are relatively new technologies that are progressively taking over. It doesn’t mean they are the right choices for everybody but it’s certainly worth it having a look at them before starting new projects.

I think this might be particularly useful for mobile apps with a rather simple backend that mostly relies on database mutations and real time subscriptions. It can reduce costs for the backend and reduce the bandwidth required by the application, apart from providing a presumably faster development.

Huge corporations like Facebook or Amazon are betting already on it. It is still a challenging field but, as it gets more attention, its complexity should be reduced.

I hope you found something of this useful. Thanks for reading and happy coding!

Serverless Vue.js with GraphQL was originally published in The Web Tub on Medium, where people are continuing the conversation by highlighting and responding to this story.

It is provided as onsenui/css/dark-onsen-css-components.css in versions ≥ 2.7.0. CSS variables are located in onsenui/css/dark-theme.css .

Theme Roller

The new Onsen UI Theme Roller app is alive! Make your own theme or just tweak the existing ones easily with this new online tool. It is available here.

The new Theme Roller is compatible with Onsen UI v2.6.0 and up, you just need to choose your desired version in the drop-down. The old Theme Roller is still available for versions equal or older than v2.1.0 (using Stylus). Versions in between won’t be supported by this new app due to some errors in the CSS components in those versions. However, updating to +2.6.0 should not be hard!

Colors can be modified variable by variable through a Color Picker or all together with the bulk editor.

The latter also allows importing your current theme for further customization by copy-pasting your variables (theme.css file) and pressing “Save changes”. Any color feature supported by cssnext is available here.

Once your custom theme is finished, you can download the result in the “Download” section. Furthermore, you can even remove elements that you don’t need from your theme in order to reduce the size.

Elements can be added back at any time by just importing the previous theme and generating a new one.

Bonus: Resources Loader

In Webpack applications, you can use sass-resources-loader to share your CSS variables across your app. Even though it’s originally made for SASS, it actually works well with other preprocessors and with cssnext features.

I personally use it to provide common CSS variables in every <style scoped> block in my Vue.js apps, but it can be used in other ways and with other frameworks as well. For example, in the Theme Roller app, any of these variables, mixins and media queries can be used in any component’s style block.

In mobile apps, you can share Onsen UI theme variables and access them in any other CSS module. I hope you find it useful as well!

Onsen UI Dark & Theme Customization was originally published in The Web Tub on Medium, where people are continuing the conversation by highlighting and responding to this story.

The new version of Onsen UI (2.8.x) was released some days ago with some interesting changes:

Bundle Size 50% Down!

Since v2.2.0 we have been refactoring all the code (class inheritance, etc.) in order to reduce the size of Onsen UI. Thanks to this, the size did not increment too much even though we were adding new components and features in every release. However, the overall size was still high.

In version 2.8, we have reduced the bundle size by more than 50%. From 657kB in 2.7.2 to 327kB in 2.8.0 (onsenui.min.js) . The main reason was switching the bundling tool from Webpack to Rollup. If you are creating a library, seriously consider Rollup for your project. Rich Harris and the community have made an incredible job!

Self-Contained ES Modules - Import Components Separately

Our Custom Elements and Vue Components are now self-contained (JS wise) and can be imported separately. This means that you can further reduce your app’s size by just importing the necessary components. It requires an environment that supports ES Modules (e.g. by using Webpack or Rollup) but it is not necessary to compile/transpile them (already provided in pure ES5).

Even though this was theoretically possible before, it relied on tree shaking algorithms to drop the non imported components. Based on some tests, these algorithms still struggle with features like Object.defineProperty (which is automatically added by ES2015 transpilers) and will end up bundling all the components instead. Therefore, let’s take tree shaking algorithms out of the equation for now and import the components we need manually.

For pure JavaScript projects, simply import the components from the new onsenui/esm directory:

// main.js

import ons from 'onsenui/esm'; // ons object

// Custom Elements
import 'onsenui/esm/elements/ons-page';
import 'onsenui/esm/elements/ons-toolbar';

The previous code imports the ons object and only two Custom Elements that will automatically be available as ons-page and ons-toolbar.

In Vue apps it is only necessary to import from vue-onsenui/esm (nothing from onsenui):

// main.js

import Vue from 'vue';
import VueOnsen from 'vue-onsenui/esm';

// Vue Components
import VOnsPage from 'vue-onsenui/esm/components/VOnsPage';
import VOnsToolbar from 'vue-onsenui/esm/components/VOnsToolbar';

Vue.use(VueOnsen); // Register $ons object in Vue's prototype
Vue.component(VOnsPage.name, VOnsPage); // Register component
Vue.component(VOnsToolbar.name, VOnsToolbar); // Register component

Since this can become a bit verbose if we import many components, the recommended way is to create a separate file which re-exports all the necessary components:

// vue-ons-components.js

export { default as VOnsPage } from 'vue-onsenui/esm/components/VOnsPage';
export { default as VOnsToolbar } from 'vue-onsenui/esm/components/VOnsToolbar';
export { default as VOnsButton } from 'vue-onsenui/esm/components/VOnsButton';

And then register all of them:

// main.js

// ... import Vue and VueOnsen
import * as VOns from './vue-ons-components.js';

Object.values(VOns).forEach(comp => Vue.component(comp.name, comp));

In addition, the Vue PWA template has also been updated to take advantage of these changes. You can start a new app by running:

vue init OnsenUI/vue-pwa-webpack myProject

Custom Icon Packs

Originally, Onsen UI used to bundle Font Awesome, Ionicons and Material Design Icons. These icon packs are not precisely small and chances are that you only need one or two of them (or even none) in your app. Since v2.8.0, it is possible to leave them out of your app by importing onsenui-core.css file instead of onsenui.css.

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui-core.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

You will need to import any custom icon pack that you want manually (e.g. Icomoon). Also, for custom icon packs you will need to call ons.disableIconAutoPrefix() in order to avoid adding fa- prefix automatically to your icons. More information here.

Conclusion

Even though there are no new components or visible features added in 2.8, we regard this as one of the most important releases. The app’s size (UI wise) has been halved while still maintaining the same functionality! We hope you enjoy these changes and share with us your thoughts.

New in Onsen UI 2.8: App size is much smaller than before! was originally published in The Web Tub on Medium, where people are continuing the conversation by highlighting and responding to this story.

Cordova apps and Progressive Web Apps targeting mobile devices are very trendy nowadays. Delivering a native look and feel is key to improve user experience and engagement but is not always an easy task. Sure thing, creating styled checkboxes and radio buttons is not an issue at all but the real features that provide the quality jump we seek are based on user interaction.

A swiping tab bar splits the content into different pages and allows the user bringing the desired page into view with his/her own finger. What if, at the same time as the user drags the page, the app gradually changes its appearance with it? Does it sound cool but hard? Let’s see how simple it actually is with Vue.js.

Getting Started

First of all, we need an actual swiping tab bar component. There is a bunch of alternatives out there offering different features. Here, we’ll use the tab bar provided by Onsen UI, which allows performing custom actions while swiping. In case you don’t know about it, Onsen UI has a set of iOS and Android components for Vue apps. For existing projects, it can be installed with NPM or Yarn:

$> npm install onsenui vue-onsenui --save-dev
$> yarn add onsenui vue-onsenui -D

Some necessary files must be included in the app:

import 'onsenui/css/onsenui.css'; // Webpack CSS import
import 'onsenui/css/onsen-css-components.css'; // Webpack CSS import

import VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);

Otherwise, new projects can be started right away via Vue CLI. It can optionally add Vuex and some other features:

$> vue init OnsenUI/vue-cordova-webpack # For Cordova apps
$> vue init OnsenUI/vue-pwa-webpack # For PWA

After this, <v-ons-tabbar> (among other components) should be available in the app.

Swiping Tab Bar in Vue

Adding a minimum swiping tab bar is very simple in Vue templates with Onsen UI. It can be defined as follows:

<v-ons-tabbar swipeable :tabs="tabs" />

The swipeable attribute can be toggled to allow or avoid swipes at different moments of the app, if necessary. tabs is a simple array of objects describing every tab appearance and content with page, label and icon properties. A full reference page for this component can be found here.

On top of this, more props can be used to modify the default behavior, add some extra customization and obtain a unique app style. Let’s see, for example, how the on-swipe prop can be used to gradually change the interface colors while swiping in order to differentiate sections within the app (link to the real app at the end of the article).

Code snippet:

This code creates a page with a simple toolbar and tab bar using v-ons-page, v-ons-toolbar and v-ons-tabbar components. The tabs property contains an array of tabs. Both page and label properties will be used by the tab bar component itself to describe the tab content and appearance, but it doesn’t stop us from providing custom properties like theme or anything else. These themes are simple arrays of RGB colors. We’ll see in a moment why this format is good to describe themes.

Notice how theswipeTheme computed property is passed to the toolbar (via style prop) and the tab bar (via tabbar-style prop). Whenever this property is changed, the style of those two components will be updated. There is also the onSwipe method provided in on-swipe prop, which will be called whenever the user moves the finger on the screen. But how do we now change the interface colors appropriately?

Linear Interpolation

Simply put, a linear interpolation (“lerp” in computer graphics) is a formula that generates middle points between two data values (like colors) based on some input. Say, for instance, we want to move a dot on the screen from an origin point x0 to an end point x1 gradually. We just need to provide both points to the formula together with the “completion ratio” in order to get the position where the dot should be placed in a specific instant. In other words, a ratio (or alpha value) describing how close we are to reach the end point.

const lerp = (x0, x1, r) => (1 — r) * x0 + r * x1;

For example, if we want to generate 3 points from x0 to x1 (excluding both of them), the first step will need r = 0.25 (25% complete); the second step r = 0.5 (50% complete, i.e. in the middle); and the third step r = 0.75 (75% complete). Of course, it can generate as many middle points as we want by just providing different ratios.

This is not only applicable to physical distances. In the previous code, we want to gradually transform a color into another based on the swipe position. In order to achieve this, we need to represent colors as discrete values and know the swipe ratio between two pages. Precisely, RGB colors are composed of 3 values that can be separately interpolated. Other representations can also be interpolated but they imply more complex code.

Apart from that, the swiping tab bar component provides the decimal index of the current page in onSwipe hook. An index of 1.65, for instance, means that the current swipe is 65% of the way between page 1 and page 2 (r = 0.65).

Therefore, if a different RGB color array is assigned to each tab, we’ll be able to interpolate each of these values based on the current swipe:

onSwipe(index, animationOptions) {
  this.animationOptions = animationOptions;

  const x0 = Math.floor(index),
    x1 = Math.ceil(index),
    ratio = index % 1;

  this.colors = this.colors.map((c, i) =>
    lerp(
      this.tabs[x0].theme[i],
      this.tabs[x1].theme[i],
      ratio
    )
  );
}

This assigns a new color array to this.colors, which is reactively used by this.swipeTheme computed property to create valid CSS syntax based on these colors.

Notice that animationOptions is also provided as the second parameter. It will be empty while swiping but, when releasing the swipe, the tab bar will use the finger velocity to finish the swipe animation. This velocity is given as duration and timing (Cubic Bezier curves) in this parameter and can be used to create a CSS transition. This way, all the animations (pages, tab bar border, and colors) will be synchronized.

What’s Next

As you can see, Vue’s declarative nature keeps all of this really simple. We can just update a specific property instead of grabbing elements from the DOM and changing styles manually.

A complete Cordova app with the previous (and more) code can be found here. It adds more interpolations following the same concept. In case you want to know more about Onsen UI for Vue, have a look at the official site.

I invite you to try out different animations and share them with us on Twitter :)

Happy coding!

Improve UX with Swiping Tab Bar Using Onsen UI for Vue was originally published in The Web Tub on Medium, where people are continuing the conversation by highlighting and responding to this story.

About “modifier” attribute

Every visual component in Onsen UI accepts a modifier attribute that alters its style. Modifiers are a cross-component way to provide visual customizability. A modifier is translated into a set of CSS classes not only for the own element but also for its children. This way, we don’t need to set CSS classes manually for every child element of our UI component or provide complex CSS selectors.

For example, using material modifier in ons-input element automatically sets .text-input--material and .text-input--material__label to its children, whereas underbar modifier sets .text-input--underbar and .text-input--underbar__label.

In order to see how any element sets these classes, you can have a look at the scheme object on each element’s declaration. For example, an ons-back-button‘s scheme looks like this. This means it will apply .back-button--modifier to the element itself and .back-button--modifier__icon and .back-button--modifier__label to its corresponding children.

Custom modifier

Let’s see a simple but useful example of how to create a custom modifier for one of our recent components, ons-toast.

By default, ons-toast is displayed full-width at the bottom of the page. Let’s change it!

We simply need to check the DOM and play a bit with the CSS properties. With this simple CSS, we can make a right-aligned “danger” modifier:

Or a centered and rounded “success” modifier:

And an extra modifier to change the font:

.toast--thick__message, .toast--thick__button {
    font-weight: 700;
}

Now we can apply all of this with a simple modifier="danger", modifier="success thick" or any other combination.

Check the result here.

For notifications, it is also possible to specify modifiers with the inline method:

In case we only want to apply a specific modifier for a specific platform, we can use :not selector. For example, let’s say we want to exclude the material modifier for iOS, we can with :not selector as shown below:

.toast--onlyios:not(.toast--material) {
    /* Only works when 'material' modifier is not applied */
}

Similarly, only for Android:

.toast--onlyandroid.toast--material {
    /* Only works when 'material' modifier is applied */
}

Onsen UI is an open source library used to create the user interface of hybrid apps. You can find more information on our GitHub page. If you like Onsen UI, please don’t forget to give us a star! ★★★★★

Creating Custom Modifiers was originally published in The Web Tub on Medium, where people are continuing the conversation by highlighting and responding to this story.

The YouTube Jukebox app has been updated to Onsen UI 2.0 + AngularJS and now includes a Material Design version. This app uses the YouTube Data API v3 to fetch videos and display them in our hybrid apps. Learn more about the included changes here.

YouTube Jukebox sample app was released some time ago for Onsen UI 1. It has a tutorial about how to use the YouTube Data API v3 with AngularJS in Onsen UI that is still completely valid for Onsen UI 2. You can check it out for more details.

YouTube Jukebox

The source code of this application is on Github.

After the latest changes it now includes a Material Design version that will be displayed in Android devices. This version contains a modal that overlays a new ons-toolbar which includes a search input. This behavior is quite common in Material Design apps.

Another interesting change is that it now loads new videos when the scroll reaches the bottom of the page using onInfiniteScroll functionality instead of a “Load more” manual button.

This app is included in our samples page along with other useful samples. If you have any doubt about this app, please leave a comment or open an issue on Github.

Originally published at onsen.io on November 24, 2016.

Onsen UI YouTube Jukebox with AngularJS was originally published in The Web Tub on Medium, where people are continuing the conversation by highlighting and responding to this story.

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.

Hello World example

The following are simple examples showing an alert dialog when clicking on a button. The solely purpose of this is showing the syntax and complexity differences between the included frameworks for a simple example. We are using the playground app to show the previews and code. If you didn’t know about it go and check it out, you will find more examples there. Moreover, we invite you to play around with the code you see in the tuts and modify everything!

Vanilla JavaScript

Since Onsen UI components behave like native DOM elements (Custom Elements) it’s really simple to deal with them with pure JavaScript or jQuery. We just have events, DOM elements, attributes and properties. Good old and plain JavaScript.

In Onsen UI, the right place to initialize a page is in its init event. Simply set a listener and modify whatever you need. Follow this link to see the main view of the playground app and find more examples with Vanilla JavaScript using other components.

AngularJS (1.x)

For this example, we can set up an AngularJS controller linked to the main page. Our HTML behaves like a template accessing the scoped variables from the controller and thus displaying data. We use ons.bootstrap() shortcut syntax, what is equivalent to angular.module('myApp', ['onsen']) (having ng-app="myApp" set, of course).

Here you can find more AngularJS + Onsen UI samples.

Angular (2+)

This is getting complex. We start using TypeScript now for Angular 2+. Here we must import our shopping list: platformBrowserDynamic, NgModule, OnsenModule, etc. Once we get all the ingredients we can safely start cooking our typed components.

This link has more tuts using Angular 2+ with Onsen UI.

React

React has its own way of doing things. We are using JSX syntax in this example and Babel for compiling it. Even thought it may seem complex, I personally like the React approach since it enforces modularity and, thanks to JSX, the “template” and the logic is directly connected.

More examples with React Components for Onsen UI here.

Vue.js

Vue is a very powerful framework that keeps things simple. Or at least simpler than the previous two, in my personal opinion. In Vue, we have access to $ons.notification instead of ons.notification object directly from the template.

More information about Vue bindings here.

Knockout.js

Another good option for simple (and maybe not so simple) apps. For basic Knockout.js usage, we don’t even need a bindings package since we can define the bindings as we want. In this case, we link a Knockout view model when a page is initialized directly in the init event based on the page’s ID.

Want more about Knockout.js + Onsen UI? Have a look at this other example. It’s a bit more complex since it’s using Navigator and Tabbar at the same time.

Conclusion

We have seen how easy is to plug Onsen UI with some of the most common frameworks nowadays. Some of them are complex frameworks that need a lot of “bootstrap” code but become very handy when the app gets bigger and need a robust way of organizing data and views. Other frameworks are quite straightforward with a gentle learning curve but possibly don’t offer so much help for organization in complex apps. At the end of the day, this is more a matter of opinion and every developer has his/her own preference. And you, what’s your choice to work with Onsen UI?

Stars on Github, tweets and comments are very appreciated. Happy coding!

Comparing Frameworks: Hello World! was originally published in The Web Tub on Medium, where people are continuing the conversation by highlighting and responding to this story.

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.

From AngularJS directives to Web Components

Onsen UI 1.x was built on top of AngularJS, a revolutionary framework for its time that is getting replaced nowadays by some more lightweight and newer ones. In AngularJS it is possible to define directives, markers on a DOM element (mostly as element names or attributes) that allows attaching a specified behavior to them. While this was great to make an HTML-Elements based framework, it carried a few drawbacks. Being built on top of AngularJS meant that every developer had to adapt to this framework in some way or another. Even if it was not used for the main part of the app, the dependency is still there running under the hood and compiling everything. Also, AngularJS is a great framework but we all know it doesn’t help too much with performance. Even though performance mostly depends on the app developer’s skills, dropping a few hundred milliseconds by removing dependencies is quite significant for hybrid apps.

Due to these and some other reasons we decided that Onsen UI 2.0 should move on and divorce from opinionated frameworks. At that time we found the Web Components project and in the team we all agreed it would be interesting to try it out.

With this technology are able to create real and reusable HTML components that behave in the way we want. As everything, this technology also has some minor drawbacks such as not being able to create custom attributes. That’s the reason why we have now, for example, <ons-lazy-repeat> element instead of an attribute as we had before with the directives. However, over all of this, we thought the swap would still be worth it.

Web Components standard

Web Components is actually a set of different and separate technologies: Custom Elements, HTML Imports, Templates and Shadow DOM. These are browser standards still under development that hopefully soon will have a native implementation in every browser. Until then we just need a simple polyfill that implements the necessary features.

To be precise, we don’t need everything in the Web Components specification, just the Custom Elements. This is what allows us to create elements that inherits the original HTMLElement with extended behavior. Thanks to it we are able to get an element by ID, tag name or class and directly use it as a normal DOM element:

var newItem = document.createElement('ons-list-item'); document.getElementById('my-list').appendChild(newItem);

We believe this makes Onsen UI super simple to use as you are working with real HTML Elements that have attributes, properties and methods just like in normal HTML5.They can be used with just pure JavaScript and it feels simple and easy.

Custom Elements reached its version 1.0 quite recently, improving their API and finalising some extra features. If you are curious about this technology you can read further about it here.

As a side note, Web Components is not the same as Polymer. This is just a project built on top of Web Components just like Onsen UI.

Not an easy change

While all of this sounds very cool, truth is that it was not a smooth change. We faced many issues that have been gradually fixed. Some of them still persist until now and force us to make adjustments to the core library from time to time.

At the beginning, Google Chrome was the only browser that natively supported Custom Elements and everything worked just right. However, other browsers without native implementation that were using the 0.x version of the polyfill presented several timing issues: Components were not loaded when they were supposed to be since they needed some extra cycles (remember that JavaScript is asynchronous). Fortunately, all of this was fixed with the version 1.0 of the polyfill (the one made by WebReflection) and now every browser is consistent in terms of Web Components (cross browser CSS is a whole different topic).

Moreover, the biggest issue we had is likely related to DOM manipulations. Some components need to create inner elements and move their content around in order to work properly. For example, when you create <ons-page> with some content, another <div class="page__content"> is actually created internally and the content is moved there. This allows us to provide a simple API and a way to use our components but it comes with a high trade off. This is just fine if we only use Custom Elements with Vanilla JavaScript or libraries like jQuery. However, more complex frameworks such as React or Angular 2 want to manage the DOM tree by themselves. Therefore, making any modification to the inner structure from the element itself is not very advisable.

In addition, every framework has its own peculiarities when it comes to element creation. Some of them allow creating elements directly with attributes on them whereas others will first create the element and then add the attributes afterwards. The same happens with the element content and some other things. We had a hard time resolving all of these problems and sometimes we still need to address related issues from time to time.

In any case, Onsen UI 2.0 has definitely improved in both performance and ease of use after all of these changes.

Becoming framework agnostic

Probably you have already heard about Onsen UI support for React, Angular 1 & 2 and recently Vue.js. For these frameworks we wanted to release a small wrapper that we call bindings. These small “add-ons” allow us to fix some timing issues described in the previous section and, most importantly, we can tailor our core library for specific groups of developers. For instance, nobody wants to do document.addEventListener('prepush', fn) in AngularJS if you can directly use an attribute <... ons-prepush="fn"> in your element. This sort of features is what we implement in the bindings in order to make Onsen UI feel more natural for Angular, React or Vue.js developers.

Still some work to do. But it looks good!

We are aware of some parts that still need to improve. For example, we want to expose and document an API for extending the core library so everyone can easily create custom bindings for other frameworks. We are also working on exposing an API for animations in order to make it easier to plug an external router and let Onsen UI handle the page transition animations.

These are, however, changes that will come after the final release as we don’t consider them urgent enough to delay the big day anymore. Onsen UI is quite robust already and we consider it ready for real world apps. You can expect the final version to arrive quite soon.

We are very thankful for the feedback we get in our forum and Github repo. This allows us to keep improving and expanding Onsen UI. We’d like Onsen UI developers to spread the word about our framework now that we are about to release the final version. Let’s make this a big framework with a big community.

You can leave comments and questions on our forum; issues and 🌟 on Github. Happy coding!

Inside Onsen UI: Web Components was originally published in The Web Tub on Medium, where people are continuing the conversation by highlighting and responding to this story.

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.

Why Meteor + Onsen UI?

Meteor is a great technology for web apps. It offers a high development efficiency by abstracting many aspects behind its client-server connection. For instance, you won’t need to worry about WebSockets, sending requests to modify your database or updating your local information. All of this is automatically handled by Meteor behind the scenes. It also supports several front-end frameworks, including React and AngularJS, so you can choose your preferred client flavor and develop your app with a reduced learning curve.

This last characteristic is what makes it pluggable to Onsen UI. Being framework-agnostic, Onsen UI can easily play well with famous technologies such as Meteor. This way, we keep a quick learning curve as well as high efficiency since Onsen UI core is implemented in pure JavaScript. Moreover, it offers beautiful looking components that change style automatically depending on the platform (iOS flat design or Android’s Material Design), making cross-development truly possible with little to no effort.

Onsen UI + Meteor Todo app

As already mentioned, Meteor offers variety of frameworks for its front-end side. Two of them, React and AngularJS, are already tested and play nicely with Onsen UI since we released official components for them. Here we will show how easy is to integrate React Components for Onsen UI with your Meteor application.

We follow the Meteor’s official tutorial to make a React Todo app and simply change the front end to use Onsen UI components. This app runs on Heroku.

• Todo List
• Todo List

The source code of this application is on Github.

As a side note, if you are curious about the React syntax used in this app, you can find some information here.

Troubleshooting

There is only one tricky part we must understand to make Onsen UI work with Meteor. As of Meteor 1.4, we are able to import CSS from node_modules folder directly in a .js file:

import ons from 'onsenui'; 
import 'onsenui/css/onsenui.css'; 
import 'onsenui/css/onsen-css-components.css';

However, we must consider this information from their docs:

When importing CSS from a JavaScript file, that CSS is not bundled with the rest of the CSS processed with the Meteor Build tool, but instead is put in your app’s <head> tag inside <style>...</style> after the main concatenated CSS file.

This actually means that CSS @import lines within these files won’t be resolved. Fonts and icons won’t be loaded in the app since Onsen UI imports those in onsenui.css file.

A very simple fix is to copy the fonts CSS folders into Meteor’s public directory. You could also make sure that Meteor processes these files in other way, but this would depend on your project configuration.

After this is done, everything will be loaded in the app and you can continue as you’d normally do with Onsen UI and Meteor.

What about AngularJS?

So far we have only faced a minor problem that can be easily fixed as well. Due to some timing issues in Meteor’s import, we will need to include Onsen UI in our app using require instead, as follows:

window.ons = require('onsenui'); 
require('onsenui/js/angular-onsenui');

Conclusion

We hope Meteor users are happy to have an alternative such as Onsen UI for their mobile apps. If you have any doubt about this content or anything else, don’t hesitate to leave a comment here or in Twitter. And don’t forget to 🌟 our GitHub repo!

Getting Started with Meteor and Onsen UI was originally published in The Web Tub on Medium, where people are continuing the conversation by highlighting and responding to this story.

Onsen UI 2.0 Release Candidate was released last week together with React Components for Onsen UI. Angular2 extension is on the way and at the same time we are focusing on improving Onsen UI development stack, e.g. tools and services complementing our framework that will make your development process much smoother. Here you have the latest news around Onsen UI.

We decided to improve Onsen UI’s development environment and community tools and few months ago we released Onsen UI x Monaca Community Forum. This forum has so far gathered, together with the already existing Gitter Chat, a bunch of developers who can quickly solve their issues. We invite you to join if you haven’t yet.

Interactive Tutorial

Now we want to introduce a new tool that you’ll hopefully love: Onsen UI Interactive Tutorial.

It’s self-explanatory. You have access to a -increasing- number of Onsen UI samples with a proper explanation about how it works, HTML & JS code and a preview that supports both iOS and Android views. We want to collect here all our examples in order to have an updated index where our users can easily learn and bootstrap their apps. These tutorials are separated depending on the framework they are developed with (for now Angular1, Angular2, React and Vanilla JS — no framework). Thus, you can choose the framework your prefer and learn how to integrate Onsen UI with it.

Also, you can modify and test these samples within this app to later export and save them in Codepen or even generate a Cordova project from them.

In case you find any error or you want to submit your own tuts, please open issues or send PRs to the interactive tutorial repo. We will be updating this tool and adding more tutorials in the upcoming weeks.

$> Onsen CLI ?

Almost. As you may already know, Onsen UI is part of the Monaca Toolkit, a set of tools that provides a seamless hybrid mobile app development including user interface, debugger, remote build, back-end and more. In this section we’d like to focus on one of those tools: Monaca CLI.

Monaca CLI has been drastically improved and released under version 2.0 to accompany our beloved Onsen UI 2.0. This tool may well be called Onsen CLI since its tightly integrated with it, allowing you to generate apps much faster starting from prepared templates. Some of the new features include signing up from the CLI itself and creating Cordova projects directly with Angular1, Angular2 (coming soon) or React frameworks:

Monaca CLI will automatically add the required libraries and external tools for your project to run. For example, if you choose a React template, you’ll get Babel and the necessary tools for transpiling and bundling the code. It will watch for your files and auto generate the bundle so you can easily preview your app in browser, emulator and devices.

Moreover, since we believe Monaca Debugger is a very useful tool for all Onsen UI developers, we made it now fully accessible from Monaca CLI. Yes, even for free licenses. Just run monaca debug and you’ll get your code transpiled + bundled (if necessary) and synchronized with all your connected devices through Monaca Debugger.

After you are done with the debugger, just run monaca remote build to get your app built in the cloud for you. Check our getting started page for more information and alternatives.

Conclusion

We are decided to improve Onsen UI environment and focus on the whole development stack. Monaca IDE, Visual Studio and Localkit users were already enjoying these tools and services and now with the improved Monaca CLI every Onsen UI developer will also have this possibility. If you are as excited as us about the incoming Onsen UI 2.0, you can join our community, star us on Github and spread the word on Twitter. Happy coding!