Desktop App development

for Mac, Windows and Linux. HTML5, Javascript and CSS3 plus the power of Python, Ruby or PHP when you need it.

Download TideSDK (v0.0.2) Read Documentation

Because it is simple and yet powerful. Using AppJS you don't need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and Javascript. What is better than this stack for application development? Beside, AppJS uses Chromium at the core so you get latest HTML 5 APIs working. So relax and focus on the task your application should do.

HTML 5

AppJS allows you to use HTML 5 APIs to create attractive applications from Word Processors to 3D Games. You are no longer limited to default GUI widgets that plaforms force you to use. Creating custom UIs is now only limited to your imagination!

Learn more about HTML 5 »

CSS 3

Using CSS you can decorate widgets as you like. Create a custom widget in HTML and complete your work with decorating it. Adding shadows, animating elements and transforming objects in 3D space are a few examples of what you can do with CSS 3.

Learn more about CSS 3 »

Node.js

The interesting part of AppJS is that it uses Node.js as the backbone. Node.js has been built to ease the process of developing scalable network applications. But today, you can see Node nearly everywhere! It has a nice API and lots of modules.

Read more at nodejs.org »

Make sure you have the latest Node.js installed.

Before you continue, install node-gyp using npm (node's package manager).

$ npm install node-gyp -g

Again use npm to install AppJS.

$ npm install appjs

AppJS tries to install dependencies based on the platform you are working with.

Now you are ready to develop your first desktop application with HTML/assets/css/JS! Create a file named app.js. Open it with your favorite editor and start coding:

/**
 * Begin by requiring appjs. appjs object has only one function that initializes everything you need.
 **/
var appjs = require('appjs');

/**
 * We will use window and app variables later.
 * settings is the object that you will use to set window properties like width or height.
 * There are more options like disabling chrome (frame around the window) or enabling fullscreen
 * mode but we don't need them.
 **/
var window,app,settings = {
  width: 800,
  height: 600,
  autoResize: false
};

// Initialize application. It tells appjs that you are going to start desktop application.
app = appjs.init();

/**
 * This event is fired when window is ready to show up. Calling window.show() before this event
 * causes exception.
 **/
app.on("window_ready",function(){
  console.log("Event WindowReady called");

  window.show();

});

/**
 * use a static router to serve html, css and javascript files that are in public folder.
 * appjs uses your routers when you request a resource with appjs:// custom scheme.
 **/
app.use(app.staticRouter('./public'));

/**
 * There are other routing functions that you can use like `post`, `get` or `all`.
 **/
app.post('/',function(req,res,next){
  res.send(200,'Hey! How are you '+req.post('firstname'));
})

/**
 * Create a window and point it to htt://appassets/js/. This url is a special url. It is not a http
 * request. AppJS manages these requests manually using routers you defined.
 **/
window = app.createWindow("http://appassets/js/",settings);
          

Create a folder named public and create a html file named index.html inside it. Open index.html in the editor. We want to create a form to submit first name and last name.

<!doctype html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <form action="/" method="POST">
      <input name="firstname" type="text" placeholder="Firstname"/>
      <input name="lastname" type="text" placeholder="Firstname"/>
      <input type="submit"/>
    </form>
  </body>
</html>

Now everything is ready. Open terminal and navigate to your project directory.

$ node app.js

You will see a window that asks you for firstname and lastname! Fill the form and click submit. AppJS routes the request to post router at line 42 of app.js. We process the request and send response.

It was a simple application to show how AppJS works. For more detailed information read the documentation here.

AppJS is a work in progress and needs a lot of improvement. There are unimplemented stuff waiting for your help! You can find them at github issue tracker or read the code and find @TODO tags! You can also subscribe to the development mailing list where we talk about AppJS features.

There are two areas you can help. If you code in C++ try to implement features that are only supported in one platform or two. We need all three major platforms to work (Mac, Linux and Windows). If you are professional in Javascript and Node.js then you can help us by implementing JS wrappers for C++ APIs.

To start contributing, fork git repository from github, clone the forked repository and make your changes according to instructions below. Then send a pull request. We discuss changes you have made. After that you can see your changes merged in the main repository!

Contribution guideline

Please follow the guidelines below before making any change to source code. Otherwise we can not merge your pull request.

Git

  • Use topic branches to add features. This way you can keep master branch up-to-date and reduce merge conflicts.
  • Use present tense commit messages. Always add describe what you did in this commit. Example:
    Fixes #111
    
    Describe what changed in this commit here.

Code

  • Remove trailing whitespaces.
  • Use two-space tab indention.
  • Use 80 characters line length.
  • Use single quotes in JS.
  • Use same line braces.
  • Use camelCase variables in JS, underline variables in C++.

AppJS should be used as a module for Nodejs. If you have npm installed then downloading AppJS is easy:

$ npm install appjs

There is no tarball at the time. We are working hard to make them available.