Giter VIP home page Giter VIP logo

riot-boilerplate's Introduction

Riot Boilerplate Project

If you want to get a flux-like Riot project up and running, look no further! This will get a building and testing project.

How to build

Easy!

npm install and bower install need to be run after freshly cloning the repository. You also need gulp to be installed.

  • gulp will build the default debug, uncompressed code
  • gulp build will make production code
  • gulp watch builds and watches the dev directory for changes, as well as runs Chrome in Continuous Integration mode
  • gulp test and gulp test_ci will run one-time and CI Karma tests, respectively. Test is headless using PhantomJS.

Code overview

The basic structure of the application looks like this:

  • /dev -> your tags, javascripts, SASS, and string translations go here. In addition, put all static resources in this directory so they'll be copied during the build process. NOTE Building will not copy dev/js, dev/sass, and dev/tag as static resources in dist/.
  • /lib -> code that generally doesn't change will be put in here. The only exception is js/main.js, which needs to be updated when data stores are added. It acts as a bootstrapping class for the compiled Riot tags.
  • /dist -> compiled code goes in here. The entire directory is meant to be served, for example with python -m http.server, and all resources will resolve to their proper relative paths.
  • /test -> put tests in here, and make sure it ends in *Spec.js for Karma to automatically run it. All Riot tags will be compiled and available for Spec files to see, but here you can use mock/ to use mocked data stores instead of the normal ones.

Where to put my code

Stores

Add them in dev/js!
Dispatcher will allow Riot tags to listen for events. Just use the Riot built-in observable methods on the global Dispatcher object to communicate with your data stores. If you register any data stores, make sure you add their instantiations in lib/main.js as well.

Tags

Put these in dev/tag.
The main tag is automatically loaded into the body of index.html, but any children of that can be added in the tags. The tag is an example of where you can add your own tag into the page.

Strings

Polyglot will load the appropriate translations, but you need to modify lib/main.js in order to properly search for the file based on user locale. By default, it will fall back to en.json if the locale can't be found. Use the two character language code to name the json file i.e. ru.json for Russian, but not en_uk.json for British English (this support will be added later)

Broken stuff

  • Karma is hosed right now. The tags are compiled and given to the test runner, but browserify doesn't run so none of the requires are picked up. This is very high on the to-do list.
  • Karma with gulp test_ci spits out a TESTS-Chrome.xml file which is annoying and doesn't belong there. Not sure where that's coming from.
  • No integrated watch solution. I use python3 -m http.server running in /dist, and it'll automatically pick up changes upon browser reload. I'd like to have something like a gulp server running in this.

riot-boilerplate's People

Contributors

tdalbo92 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.