Spinebash

This is a Bash-built, dependency-free SPA framework which allows for a modular programming experience using HTML, CSS and JavaScript.

Spinebash utilises standard CLI tools commonly pre-installed with standard Linux/Unix systems - notably find and perl.

Installation

1. Download Archive

# With Wget
wget --no-check-certificate --content-disposition https://github.com/fatherbrennan/spinebash/raw/master/spinebash-1.0.1.tar.gz

# With cURL
curl -JLO https://github.com/fatherbrennan/spinebash/raw/master/spinebash-1.0.1.tar.gz

2. Extract and Remove Archive

tar xvf spinebash-1.0.1.tar.gz && rm -rf spinebash-1.0.1.tar.gz

3. Confirm Spine CLI is Installed

spine --version

Complete steps in Spine Installation if unregistered command.

File Structure

.config

Spinebash configuration file to alter framework behaviour.

Resources/

Directory containing application resources.

Resources/views/static/

Parent directory of static content and views.

File paths are fixed
Content added to asset files will be static throughout application navigation (unless forced manipulation)

Child directories:

404
- Treated and wrapped like a view.
- View to be displayed on invalid route navigation.
- Default route: /http_404/
Head
- Static content inserted inside the <head> tag
Frame
- Content is wrapped inside a <div class="frame"> element
- Spinebash Bootstrap CSS - width: 100%, height: 29px
- Typical usage is for desktop applications through frameworks such as Electron
Nav
- Content is wrapped inside a <div class="nav"> element
- View is inserted between the Frame view and the dynamic content views
- (Hint) Reusable elements can be added to nav to be cross-viewable-content

Resources/views/content/

Directory containing dynamic views.

File paths are dynamic and can be changed
All views are added to the asset file (Public/index.html)
One dynamic view is displayed at a time (declared in routes)

Resources/routes.sh

Declare application routes.

Public/

Directory containing asset files.

Public/src/

Protected asset directory, untouched by framework scripts. Can contain directories, files, images, JSON databases, etc.

<!-- Use relative path from src/ -->
<img class="header" src="src/img/icon.svg" />

Framework/

Directory containing framework resources.

Routing

Self implemented hash router using hash anchors and CSS3.

Declare Routes

VIEW and ROUTE are associated by line.

Variables

VIEW
- Unique
- Valid URL hash route
ROUTE
- Unique
- Relative file path from Resources/views/content/
- No file format suffix (html assumed)

# Resources/routes.sh
ROUTE 'home/' VIEW 'index'
ROUTE 'newpage/' VIEW 'new_page_dir/new_page_file'

View Navigation

Methods to navigate between dynamic views.

(Option 1) HTML

<!-- Prefix '#/' -->
<a href="#/newpage/" class="btn">Go New Page</a>

(Option 2) JavaScript

<span id="home-button" class="btn">Go New Page</span>

// On element click, redirect to new page
document.getElementById('home-button').addEventListener('click', function () {
    redirect('newpage/');
});

Spine CLI

Spine is the command line interface used to interact with the Spinebash framework.

spine --help

spine
 Usage: spine <command> <extension>

commands

 dev, start
        build app assets in dev mode

 clear
        clear the framework cache including assets

 open
        open the app in the default web browser

 -h, --help
        display command info

 -v, --version
        display version info

extensions

 -s, --script
        extends [ start ] [ dev ]
          run config SCRIPT_TAIL after spine build process

examples

 spine dev --script
        run dev build process and then run config defined script
        where SCRIPT_TAIL="npm dev". Can be used within framework
        environments such as the Electron framework

 spine open
        open the Public/index.html file using the machine's
        default web browser

Notes

dev and start commands are currently the same

Spine Installation

1. Download Archive

# With Wget
wget --no-check-certificate --content-disposition https://github.com/fatherbrennan/spinebash/raw/master/spine_cli_installer_1.0.0.sh

# With cURL
curl -JLO https://github.com/fatherbrennan/spinebash/raw/master/spine_cli_installer_1.0.0.sh

2. Add Permissions and Execute

chmod 700 spine_cli_installer_1.0.0.sh && . ./spine_cli_installer_1.0.0.sh

3. Confirm Spine CLI is Installed

spine --version

Limitations

File Naming

camelCase
PascalCase
snake_case
kebab-case

Build

JavaScript

Files are not concatenated
File names are to be unique even in nested directories
(Recommendation) create single file if possible for performance

Compression

CSS and HTML compression support is good assuming correct coding practices. JavaScript compression support is beta, and support is limited (not recommended).

Pros

Remove comments
Remove whitespace

Cons

Variable names are unchanged
Semicolons not inserted

Third-Party Support

The Spinebash framework tries not to limit developer-preferred dependencies.

Recommendations

Compressors

Popular JavaScript compressors

# .config

# Example usage
USE_COMPRESSOR_JS="terser INPUT -o OUTPUT"

fatherbrennan / spinebash Goto Github PK

spinebash's Introduction

Spinebash

Installation

File Structure

Routing

Declare Routes

View Navigation

Spine CLI

Spine Installation

Limitations

File Naming

Build

Third-Party Support

Recommendations

spinebash's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org