xone

Xone is an open source lightweight Javascript framework for building modern web applications.

Notice: Actually this is a alpha state of this repository. We de not recommended using this repo until this message has been removed.

• License
• Changelog
• Installation
• Codebase Structure
• Global App Configuration
• Basic Examples: MVC Pattern / Routes / Events / Templates / Dev Tools
• Persistent Models
• Core Library

---

Overview

• Provides a lightweight full stack environment to develop beautiful applications for every use
• Simple, fast and natural usage out of the box
• Provides the most possible performance while ensuring maximum crossplatform support
• Focus on wide codebase compatibility like mobile devices, desktop pc, browser environments
• Xone libraries completely compiles with your codebase (only the used code remains in a single javascript binary file)
• Therefore you will get the most lightweight footprint possible
• Provides advanced MVC architecture and template system for your app
• Provides a performance optimized render engine
• Targeting products: hybrid apps, progressive web apps, cordova, ionic, mobile games, single-page web apps

---

Xone basically comes in 2 different versions:

1. Xone Project (Full Stack Environment)
2. Xone Extern Library (Standalone)

Features by default	Xone Project (Recommended)	Xone Library (Standalone)
Core Library
MVC Framework
Render Engine
Unit Tests		-
Debugging Tools		-
Environments		-
Global App Configuration		-
Build/Compile Project		-
Dynamic Templates (HTML > JSON)		-
Dependency Management		-
Initial Codebase		-
CLI Tools		-
Support Closure Compiler Advanced Mode		-
Dead Code Removal		-
Not strictly bound by Conventions	-
Use as a Standalone Library (like jQuery/Underscore)	-
Use as a Framework (like Bootstrap/Angular)		-
Use as a Dev Environment (like Sencha/Meteor)		-

Installation (Xone Project)

> npm install -g xone

Note: To make the Xone CLI globally available, you have to install Xone as a global npm module (also in addition to any local installation if you want to keep simple as most as possible). You can also manage multiple/custom versions of Xone as well as using the CLI without any global installations (read further).

Note: Xone binaries typically has to be installed via "xone create" or "xone install" to make full advantage of the build system and also comes with its own pre-defined folder structure (followed by some conventions). We will provide a stand-alone version optionally to skip as many conventions as possible (e.g. Xone acts like an extern Javascript Plugin). We recommended to use the full Xone build capabilities (read further).

Create New Xone Project

Create a new project inside the directory workspace\my_project:

workspace> xone create "my_project"

Read further

Update existing Xone project (fetches from global npm_modules installation)

Fetch update:

> npm install -g xone

Install update to an existing project

workspace\my_project> xone install

Read further

---

Build Xone project

Un-compiled sources located in: workspace\my_project\app\*

workspace\my_project> app build

Production build located in: workspace\my_project\bin\www\*

Note: We recommended to use production builds for any external/public release and use the sources only for developing, testing and may some other internal purposes. To skip the build integration of Xone, you have to use the standalone version instead.

Run Xone project (Local, Browser)

Open app\index.html from sources or bin\www\index.html from production build in your preferred browser.

Run Xone project (Cordova)

Use production builds located in workspace\my_project\bin\* to move forward into your Cordova-based projects.

---

Xone Render Engine

The render engine provides an optional "fast mode" to get the most out of performance. All internal processes of Xone takes advantage when "fast mode" is enabled (e.g. render templates, animate elements, toggle views). When it runs in "fast mode" the render engine has a very closed infrastructure you should keep notice:

1. CSS Styles
   • Change styles
   • Get styles
2. CSS Classes
   • Change classes
   • Get classes
3. HTML Content
   • Change contents
   • Get contents

Note: When "fast mode" is enabled it should not be mixed by any other external manipulations of the same category listed above. We recommended to disable the "fast mode" when style issues occurs by any direct style manipulations (e.g. when using an extern library).

Note: The "fast mode" is enabled by default in a Xone Project (may change in future) and is disabled by default in the Xone Standalone Library.

Performance Comparison: Native VS. jQuery VS. Xone

• https://jsperf.com/xone-style-performance
• https://jsperf.com/xone-dom-selector-performance

---

TODO

• Provide Standalone Version (dependency-less)
• Create/Install (CLI)
• Use npm modules for system tasks (supports all platforms)
• Improve Environment Mappings
• Improve Worker Integration
• Provide Plugin Management
• Improve Dependency Management

---

Features

• Manage Development Environments:
  • production, development, test, benchmark
• Manage Process Environments (Rack):
  • webapp, cordova, native, local, browser
• Manage Platform Environments:
  • Android, iOS, Windows, Webkit, Mozilla, MSIE
• Model-View-Controller
  • Supports persistent model management
• Full MVC-managed environment:
  • Routes
  • Events
  • Handlers
  • Controller
  • Interfaces
  • Adapter
  • Models
  • Mapper
  • Views
  • Payloads
  • Threads / Worker
  • Stubs / Mocks
  • Translations
• Javascript Core Library
• Codebase Dependency Management
• Supports DOM pattern in JSON format
• Template System
  • Static Content
  • Dynamic Content
  • Partials
  • Locales
• Build System
• Template Compiler
• Layout Manager
• Multi-Platform-Injections
• Event Delegation
• NoSQL Persistent Storage
• GZIP Storage Data Compression
• FlexiCache (auto-scale, auto-clean)
• Multi Language Support
• Unit Test Integration
• Debug Mode
  • Debugger Tools
  • Performance Tools
  • Analytics/Statistic Tools
• Benchmark Integration
• Supports Javascript Closure Compiler "Advanced Mode"
• Less CSS Integration
• CSS Compressor Integration
• Compatible with almost each library out there
• Also can be mixed with similar technologies like: Angular or React