WEBIX JAVASCRIPT LIBRARY BLOG

UI development best practices, front-end programming tips and news to speed up your Web development.

Follow us:

Write for us: learn about our guest posts guidelines.

Build Responsive Web Apps with Webix 1.8

Today Webix has been updated to the version 1.8 that brings some pleasant bonuses for our users. The new version includes UI improvements, bug fixes and a few techniques for building responsive apps.

Responsive web apps

Previously when you were developing Webix web apps for desktop you had a problem with adapting the same app for the mobile devices. These desktop web apps had screens too wide for mobile apps.

So in Webix 1.8 we’ve added 2 features that will make your web apps responsive and improve user experience on both desktop and mobile devices.

Let’s consider the responsive web app made with Webix to show you this functionality.

Here is the screenshot of desktop web app:

webix reponsive web app

Webix 1.7: New Skin for Desktop and Mobile Devices

Today our team is happy to announce the release of Webix 1.7 that includes a new appealing default skin, support for multiselect on touch devices, some UI improvements and bug fixes.

A new skin looks and runs great on both desktop and mobile devices. It is styled in a flat design that will make your web apps look trendy and user-friendly.

718_image_13_01

The main colors of Webix 1.7 skin are sky blue, snow-white ( the color of background), bright green (the color of controls and selection) and dark grey. This color palette reflects the vibrant colors of spring nature that will cheer up your users. To evaluate the flat skin please check our Webix demo.

Using Webix with NodeJS

NodeJS is one of the hottest programming technologies. It allows creating fully functional web apps in a few lines of code. What is more, apps on NodeJS platform can be made completely in JavaScript. Using the same language on client and server side gives us real bonuses.

Let’s see how the client-side code based on Webix UI can be connected to a database with the help of NodeJS.

nodejs webix

Webix Gets NuGet and Bower Packages

Good news! The installation of Webix is becoming easier. From today the library can be installed with the help of NuGet or Bower dependency management tools.

Nuget

NuGet is a package manager for the Microsoft development platform. You can install Webix by executing the following command line:

nuget install Webix

If you are a user of Microsoft Visual Studio, you should run the next command from Package Manager Console:

install-package Webix

Using Handlebars Templates with Webix UI

JavaScript UI library Webix allows redefining the appearance of many elements through templating. For example, in tree view we can define the look of item through the following template:

webix.ui({
    view:"tree", data:tree_data,
    template:"{common.icon()} #value#"
});

simple template

 

Here you can see the two main components of webix templates: common helpers and property placeholders. Common helpers are predefined pieces of logic which renders some common elements (tree icon in the above case). Property placeholders are markers that will be replaced with data from related data object.
By using html tags in the template we can change the look of component in many ways.

1 53 54 55 56 57 61