Skip to content

Latest commit

 

History

History
144 lines (106 loc) · 5.36 KB

get-started.md

File metadata and controls

144 lines (106 loc) · 5.36 KB
Raw

Documentation

This documentation should give you knowledge of Litespeed.js framework basic concepts and how to get started building you first app.

Get Started

The first step to get started with Litespeed.js is to init the framework in your web project HTML layout.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <main data-ls-router>Loading your router matching state in this element</main>

        <script>
            (function (window) {
                "use strict";

                document.addEventListener("DOMContentLoaded", function() {
                    let head      = document.getElementsByTagName('head')[0];
                    let script    = document.createElement('script');
                    script.async  = true;
                    script.src    = 'scripts/litespeed.js';

                    script.onload = function() {

                        window.ls.router // Add some basic routing rules
                            .add('/', {
                                template: '/pages/index.html'
                            })
                            .add('/pages/page-1', {
                                template: '/pages/page-1.html'
                            })
                        ;

                        window.ls.run(window); // Watch the magic happens
                    };

                    head.appendChild(script);
                });

            }(window));

        </script>
    </body>
</html>

This is a basic example that shows how to init a Litespeed.js JS library asynchronously and set 3 different views for our main router scope with their respective URL paths.

Create a New Service

Services are where you handle your app logic. A service is any Javascript object, whether a native object, object you create or a 3rd party library, we really don't mind.

Any service you register using the container service is automatically available to auto-discovery available using Litespeed dependency injection algorithm.

Example

window.Litespeed.container.set('timezone', function () {
        return {
            convert: function (unixTime) {
                var timezoneMinutes = new Date().getTimezoneOffset();
                timezoneMinutes = (timezoneMinutes === 0) ? 0 : -timezoneMinutes;

                // Timezone difference in minutes such as 330 or -360 or 0
                return parseInt(unixTime) + (timezoneMinutes * 60);
            }
        };
    }, true);

APIs & Examples

Service Description API & Examples
container Manage service registration, data binding and dependency injection internally. API Refs & Examples
cookie Manages user cookie, retrieve and set cookies. API Refs & Examples
expression Parse template syntax expressions and execute them as JS code. API Refs & Examples
filter Use predefined string filters or add custom filters. API Refs & Examples
http Manage HTTP interactions with server side APIs. API Refs & Examples
router Manage state registration and routing. API Refs & Examples
view Handles views registration and rendering API Refs & Examples

Create a New View Component

// TODO

APIs & Examples

Service Description API & Examples
ls-router Listen for app URL changes and renders the matching route on the DOM. API Refs & Examples
ls-bind Binds data between your services to the DOM. API Refs & Examples
ls-attrs Binds data between your services to your element attributes. API Refs & Examples
ls-if Hides element according to given expression evaluation API Refs & Examples
ls-loop Iterate over a service or array and renders element for each iteration. API Refs & Examples
ls-template Render HTTP remote or inline script template to given element. API Refs & Examples

Create a New Filter

// TODO

Dependency Injection

Litespeed.js support an advanced dependency injection which allows your closures to get other Litespeed.js services available to them as arguments.

To enable service injection, name the services you need as arguments in closures when creating new services or view components.

Examples

window.Litespeed.conatiner.set('user1', { // Creating our first service
    'name': 'first member',
    'email': 'one@example.com'
}, true, true);

window.Litespeed.conatiner.set('user2', { // Creating our second service
    'name': 'second member',
    'email': 'two@example.com'
}, true, true);

window.Litespeed.conatiner.set('team', function(user1, user2) {
  // Hurray! both user1 and user2 services are magically available for us! 
  return {
      'user1': user1,
      'user2': user2,
  }
}, true, true);

// And the same works with a view controller:

window.Litespeed.conatiner.get('view')
    .add({
        selector: 'data-test',
        repeat: true,
        controller: function(element, user1, user2, document) {
            // Hurray! both element, user1 and user2 and document services are all magically available for us!
        }
    })