We use eslint to keep our code tidy.
We may switch to TypeScript in the future.
We use prettier to auto-format our code, with appropriate plugins to format JS code inside HTML or Vue components.
We use Jest for tests.
We now use VueJS for our new front-end projects.
- Official Style Guide: <https://vuejs.org/v2/style-guide/>
- Testing: use <https://github.com/vuejs/vue-test-utils>
- Additional resources on testing: - <https://medium.com/pixelmatters/unit-testing-with-vue-approach-tips-and-tricks-part-1-b7d3209384dc>
Since this section is a little short on content, here’s a terrific list of recommendations:
Also, this coding guide for HTML and CSS:
Past, present, future¶
Current (aka old) state¶
Where we are heading¶
A lot have changed in the JavsScript world over the last three years, since we’ve started the Abilian project (and company).
While the “jQuery + plugins + spaghetti code” approach that we’ve been using so far is probably enough for the kind of interaction we’re featuring currently, it’s now time to be more ambitious with our front-end code.
We need to move our code base to a more modern, decoupled, archiecture.
Our framework of choice is now Vue.js.
Like everyone who is doing front-end development, we have to deal with buggy browsers from the pasts.
- <http://www.designingsocialinterfaces.com/patterns/Main_Page> + associated book
Embrace the future, now¶
We’ve used CoffeeScript in the past, but have reversed the decision to base all our front-end developments on CoffeeScript before it was put in practice.
We’re now using ES6 aka ES2015 using the Babel transpiler for our new projects (part of our existing code base is still based on ES5).
Here are some references regarding ES2015:
- <https://github.com/getify/You-Dont-Know-JS> (book series)
We plan to try using TypeScript (a statically typed variant of JS) in the future.
We’re currently using Bootstrap (v3), because it’s extremely popular and quite comprehensive.
We’re using LESS (or SASS, depending on the phase of the moon).
We’re also trying to find a way to write better (more manageable) CSS/LESS/SASS code to go along our pluggable architecture. The following posts (and all the references given therein) give a lot of interesting advice and point to several useful methodologies, that we should put to use:
Patterns libraries aka style guides¶
We’re using NPM for package management (and also YARN), and WebPack for build.
WebPack provides live reloading (with the right extension) so that’s cool.
We don’t use gulp or grunt.
Unit tests: TODO.
Functional tests: we should be using Selenium (via Webdriver) more.