Skip to content

Technologies

Edward Hibbert edited this page May 18, 2018 · 2 revisions

This page describes the technologies which we use. It will help you understand which parts of the project you may be able to contribute to. But the headline is that if you know HTML/JS/CSS, you should be able to get on and make simple changes; more complex changes will also require changes to iznik-server.

We would particularly welcome people who are great at CSS. We're not.

Iznik is a single-page app. Originally this used [Require](requirejs.org); now it uses [Webpack](https://webpack.js.org/)

We use:

  • [Backbone](backbonejs.org), to provide views/models/collections. We chose this because it is a reasonably common architecture, and it's not too cutting edge (which would limit the number of developers we might attract). There are a few key differences from default backbone is that our render() returns a Promise; this is because we may fetch templates asynchronously. We don't use [Marionette](marionettejs.com) because that would reduce the developer pool.
  • [Underscore](underscorejs.org), both as a commonly-used set of utilities, and as a templating engine.
  • [Bootstrap](http://getbootstrap.com), as a styling framework. We chose this because it is very common and well-maintained. Anyone with any familiarity with CSS should be able to handle this.
A general client side flow is:
  • The browser loads the page, which invokes our Backbone router (router.js).
  • That decides which page to load. All pages share the same base layout, though the sidebars may or may not be visible depending on the page and screen size.
  • The page instantiates a number of Backbone views, backed up by Backbone collections and models, populated from a RESTful API to populate what you see on screen. Some pages have infinite scrolling; many use CollectionView to handle repeated occurrences of the same view with different models.
  • Actions on the pages result in more API calls, or transitions to other pages via new routes.
  • Some actions may pop up Bootstrap modals.

3rd-party Client components

The key 3rd-party component we use is [Sentry](https://sentry.io/), which allows us to capture client side errors.

Mobile apps

The "Freegle" and "ModTools" mobile apps are based on the master code in the "mobile" and "modtools" branches. Each branch keeps up to date with the master code while maintaining the differences required to run as an app.

The apps are Cordova apps and are built using the Cordova api with various plugins to provide mobile-specific functionality. The Android version is most easily built in Windows while the iOS version is build on a Mac. The apps are targeted at the more recent device versions so as to avoid compatibility problems with older devices, ie Android 4.4+ and iOS 9+. Debugging is probably most easily done in Windows in Chrome with a USB connection to a real Android device.

Clone this wiki locally