JavaScript
Stack
This describes our technology stack and we are mainly using React in latest implementations.
Frameworks
Bootstrap
OpusCapita user interface uses an extended version of Twitter Bootstrap 3.3.7 HTML, CSS and JS framework for developing web-based HTML5 user interfaces.
Bootstrap 4
- Icons
- Drops Glyphicons icon fonts. For alternative use Font Awesome.
- Flexbox
- Uses Flexbox by default. Flexbox is very useful for creating layouts more easily.
React
User interfaces are mainly built using React with JSX syntax and ES6.
| Library | Description | Notes |
|---|---|---|
| React | Library for building user interface | |
| React Bootstrap | JavaScript parts of Bootstrap with React components | Bootstrap 4 fork of React Bootstrap |
| React Intl | Internationalization library for React. Used for Internationalization and formatting dates, numbers and strings. | |
| React Redux | React binding to Redux. Provides a convenient way for "connecting" React to Redux by using connect higher order component (HOC). | |
| React Router | Routing library for React | |
| React Redux Router | React bindings to between Redux and Router. Used for keeping state in sync with router. | |
| Redux Thunk | Redux Middleware for Async actions | |
| Draft.js | Draft.js is a framework for building rich text editors in React. | |
| React-Motion | A spring that solves your animation problems. | |
| Recompose | A React utility belt for function components and higher-order components. |
Libraries
| Library | Description | Notes |
|---|---|---|
| Axios | Promise based HTTP client | |
| SuperAgent | SuperAgent is a small progressive client-side HTTP request library, and Node.js module with the same API, sporting many high-level HTTP client features. | |
| Immutable | Immutable collections for JavaScript | |
| Redux | State handling. Redux is a predictable state container for JavaScript apps. | |
| Lodash | A modern JavaScript utility library delivering modularity, performance & extras | |
| shallowequal | Like lodash isEqual but for shallow equal | |
| Classnames | A simple JavaScript utility for conditionally joining classNames together | |
| Validate.js | Validate.js provides a declarative way of validating javascript objects | |
| Moment.js | Parse, validate, manipulate, and display dates and times in JavaScript | |
| React DnD | Drag and Drop for React |
Test frameworks and tools
| Library | Description | Notes |
|---|---|---|
| Mocha | Mocha is a feature-rich JavaScript test framework | |
| Jest | Zero configuration testing platform. Jest is used by Facebook to test all JavaScript code including React applications. | |
| Chai | Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework. | |
| Jasmine | Jasmine is a behavior-driven development framework for testing JavaScript code./td> | |
| Enzyme | Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. | |
| Istanbul | Yet another JS code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests. Supports all JS coverage use cases including unit tests, server side functional tests and browser tests. Built for scale. | Could be used together with nyc (the Istanbul command line interface) |
| Sinon | Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework. | |
| Nock | Nock is an HTTP mocking and expectations library for Node.js |
Build Tools
| Library | Description | Notes |
|---|---|---|
| Babel | JavaScript compiler | ES6 is used, but ES2017 is not used yet. |
| Webpack | Module bundling | Use version 2.x and update existing 1.x to 2.x as soon as possible. |
| ESLint | The pluggable linting utility for JavaScript and JSX | Used together OpusCapita ESLint config |
| OpusCapita npm scripts | Package provides an unified release/build approach for npm package and grails plugin from npm packages. |
Node.js server side frameworks and libraries
| Library | Description | Notes |
|---|---|---|
| Express | Fast, unopinionated, minimalist web framework for Node.js | Often used together with the following libraries:
|
| Sequelize | Sequelize is a promise-based ORM for Node.js and io.js | Optionally could be used with Epilogue to create flexible REST endpoints and controllers from Sequelize models in Express app |
| Intel | Logging library thst supports hierachical named loggers, convenient configuration and console injection(replacement) | |
| morgan | HTTP request logger middleware for node.js | |
| Passport | Passport is authentication middleware for Node.js | |
| Request | Simplified HTTP client | |
| Nodemailer | Library for email sending |
Other
Following are still used in some products, but should not be used in new implementations.
jQuery
| Library | Description | Notes |
|---|---|---|
| jQuery | Fast, small, and feature-rich JavaScript library for document traversal and manipulation, event handling, animation, and Ajax. | Use as latest version as possible. |
| jQuery UI | Curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. | Not used in new implementations. |
| jqGrid | ||
| jQuery-File-Upload | File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. | Not used in new implementations. |
| jQuery Tipsy | Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute. | Not used in new implementations. |
Twitter Bootstrap
| Library | Description | Notes |
|---|---|---|
| bootstrap-switch | Turn checkboxes and radio buttons in toggle switches. | Not used in new implementations. |
| bootstrap-datepicker | Flexible datepicker widget in the Bootstrap style. | Not used in new implementations. |
| Color Picker | Not used in new implementations. |
CSS
| Library | Description | Notes |
|---|---|---|
| Normalize.css | Part of Bootstrap. | Not used in new implementations. |
JS Plug-Ins, which are part of Bootstrap
| Library | Description | Notes |
|---|---|---|
| ScrollSpy.js | Part of Bootstrap. | Not used in new implementations. |
| Transition.js | Part of Bootstrap. | Not used in new implementations. |
| Button.js | Part of Bootstrap. | Not used in new implementations. |
| Collapse.js | Part of Bootstrap. | Not used in new implementations. |
| Affix.js | Part of Bootstrap. | Not used in new implementations. |