This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
xone with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
Xone will get some major changes. This was required to open capabilities for upcoming features we are working now like Xone Native. The plan is to release a final architecture until v.1.0.0 and then also to be done with most of the breaking changes.
run(Pseudo Thread Runner Instance)
APP.MAPPER[name]→ Is now a part of View, Model and/or Route (see: View Mappings, Model Mappings, Payload Mappings)
APP.HANDLER→ you are free to use any style (like before)
APP.HELPER→ you are free to use any style (like before)
Those features will become deprecated for now (unsupported):
Basically Xone has an easy to learn high-level interface without forcing you to implement any low-level "framework-cryptofied" code as you would do with Angular or React. That also preserves huge flexibility to your codebase for upcoming technologies, ports or any other major changes.
Xone basically is available in 3 different versions:
|Features by default||Xone Project (Environment)||Xone Bundle (Standalone)||Xone Library (Standalone)|
|Final project filesize||smallest||small||normal|
|Global App Configuration||-|
|Dynamic Templates (HTML > JSON)||-||-|
|Support Closure Compiler Advanced Mode||-|
|Dead Code Removal||-|
|Is not strictly bound by Conventions||-|
|Does not require Node.js||-|
|Use as a Standalone Library (like jQuery/Underscore)||-|
|Use as a Framework (like Bootstrap/Angular)||-|
|Use as a Dev Environment (like Sencha/Meteor)||-||-|
> 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 use a local custom versions of Xone as well as using the CLI without any global installations (read further).
Alternatively in the root of your project you can use the local CLI shortcut app instead for xone, e.g.:
my_project> app build
Note: The options create and install both are not available over the shortcut app.
On a linux machine you may use:
sudo npm install -g xone
If the global "xone" identifier is not registered properly try one of these lines:
hash xone hash -r
Alternatively you can use the local CLI fallback like:
bash xone build
Create a new project inside the directory workspace/my_project:
workspace> xone create my_project
Works, but it is generally not recommended to use whitespaces in a project folder name:
workspace> xone create "my project"
To update Xone of an already existing project you basically need 2 steps:
> npm install -g xone
workspace/my_project> xone install
Note: This will not overwrite any of your project files! Only projects xone library files located in app/lib/xone/ are updated.
Un-compiled sources located in: workspace/my_project/app/*
my_project> xone build
Production build located in: workspace/my_project/public/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.
my_project> xone server
Open your preferred webrowser and goto 'http://localhost/app/' or 'http://localhost/public/www/'
Optionally you can pass custom host and port:
my_project> xone server localhost 8080
Open your preferred webrowser and goto 'http://localhost:8080'
Open app/index.html from sources or public/www/index.html from production build in your preferred browser.
Use production builds located in workspace/my_project/public/* to move forward into your Cordova-based projects or upload to a webserver.
Xone provides custom platform injections to perform platform specific production builds. Therefore all those builds only includes necessary code and dependencies for their related platform.
Show currently defined platforms:
my_project> xone platform
Perform platform specific compilation:
my_project> xone compile android
Compiled files remains in: workspace/my_project/app/*
Perform platform specific builds:
my_project> xone build android
Build destination: workspace/my_project/public/android/*
You can add unlimited custom platforms, e.g. create a platform 'webapp':
my_project> xone platform add webapp my_project> xone build webapp
Build destination: workspace/my_project/public/webapp/*
my_project> xone build bundle
Build destination: workspace/my_project/app/lib/xone/dist/xone.bundle.js
my_project> xone build lib
Build destination: workspace/my_project/app/lib/xone/dist/xone.lib.js
my_project> xone build lib min ./app/js/
Build destination: workspace/my_project/app/js/xone.lib.min.js
Note: The order of passed parameters cannot be changed actually.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- END_OF_BODY --> <!-- LOAD XONE: --> <script src="js/xone.lib.min.js"></script> <!-- YOUR APP CODE: --> <script src="js/app.js"></script> </body> </html>
Xone build uses the Google Closure Compiler. All Xone libraries also supports compilation in _"Advanced Mode"_. The build properties can be configured in
xone.json. The Closure Compiler also provides a simple dependency management system (provide/require) you should make use of to improve dead code removal.
Note: If you have less experience with the Closure Compiler you can optionally set the compilation level to "simple" on the field
closure_compiler_levelwithin the xone config file.
|Auto Sort Dependencies||-|
|"Strict" Dependencies (Entry Point)||-|
|"Pretty Print" Compilation||-|
my_project> xone docs
Docs will be generated in _'docs/api/'_.