Getting Started with ChocolateChip-UI

ChocolateChip-UI is a JavaScript framework for building hybrid apps for Android and iOS. If you are comfortable with HTML, CSS and JavaScript, this framework can enable you to take your ideas and use your current Web development skills to create a mobile app.

Besides the beautiful layouts and widgets, ChocolateChip-UI is crazy fast, faster than jQuery, React, Angular. In fact, it is sometimes faster than vanilla JavaScript in certain operations. It loads fast, it reaches interactivity fast, and with optimized animations, everything feels natural and fluid to the user.

To get set up, you need to have NodeJS installed. If you don't have that, then go to https://nodejs.org. Download it and install it. When done you can then use NPM in your terminal to install the command line interface for ChocolateChip-UI. You do that with the following command:

npm i -g chui

If you're on a Mac or Linux, you'll need to run that with the sudo command, which will ask you for your password. Once this is done, you can use the chui cli. There are three things you an immediately do with chui, output all the examples, output a set of reference apps, or create a new project for an app.

Examples

The examples are quick illustrations of layout types, buttons, grids and widgets. These show you what ChocolateChip-UI offers. To get the examples run chui in the terminal with the flag -e:

chui -e

This will create a folder named "ChUI Examples". Open it and explore. You can open them in your browser by double clicking.

Reference Apps

You can output the ChocolateChip-UI reference apps. These serve to show you how to organize your code. Of course, you are free to organize your code however you want. These are based on the default structure you get when you create a new project. To get the reference apps, run this in your terminal:

chui -r

After that you'll find a folder on your desktop named ChUI Reference Apps. Inside it you'll find four projects: Fragranž, SFCoffee, TodoMVC and Vino. Frangranž is a demonstration of how to put together an app that offers an assortment of colognes for men, women and child. You'll want to examine its dev folder to see how the code is organized. You'll also be able to examine the dev folder of the other three projects.

Creating a New Project

The main purpose of the chui command line tool is to let you quickly set up a new project. This will give you an automatic build pipe line based on the following: Rollup, Babel, Uglify and Browsersync. Rollup lets you use ES6 modules to export and import your projects modules. It takes them and bundles them into one file. This will give you a file with only the parts you've imported. Next it passes the code to Babel to transpire it to ES5 for older browsers. Then it minifies it. Then it launches a process to watch every file in your project's dev folder. And finally it starts a server instance and and launches your app in your browser.

Options for Projects

There are a number of different options you can use when creating a new project. The simplest is to use the -n flag. This lets you indicate the name for your project.

chui -n MyProject

If you want your project to have a multi-word name, you'll need to enclose the name in quotes:

chui -n 'My Project'

There are three other flags you can use to pass options:

1. -t (basic, navigation, slideout, tabbar)
2. -o (android, ios )
3. -x (JSX support)

Project Types

When you use the flag -t, you proved an additional argument to get a project that supports the project type provided. The default is basic, so if you provide no type, the result will be basic. Otherwise, if you want you project to use a navigation list, or a slide out menu or a tabbar, you would provide one of those values:

chui -n MyApp -t basic

chui -n MyApp -t navigation

chui -n MyApp -t slideout

chui -n MyApp -t tabbar

Platform Target

If you provide no platform target, ChUI outputs a project with support for Android. To specific a specific platform, you use the -o flag followed by the platform:

chui -n MyApp -o android

chui -n MyApp -t navigation -o ios

chui -n MyApp -t slideout -o android

Support for JSX

By default ChocolateChip-UI uses ES6 template literals to define a component's render function. If you prefer to use JSX, you can. You just need to let ChUI know by passing in the -x flag when you make a new project:

chui -n MyApp -t basic -o android -x

chui -n MyApp -t navigation -o ios -x

chui -n MyApp -t tabbar -o android -x

Installing Project Dependencies

Once you've created your new project, you'll need to use your terminal to cd to the project folder and run npm i to install the project's dependencies:

npm i

Running Your App

When you've got your project's dependencies installed, you can start your app. You can do this by running "gulp" in the terminal while in the project's folder. This will start the build process, start watchers, start a server and launch your app in the browser.

Learning More

To learn more about ChocolateChip-UI, visit the website and head to the documentation.