Skip to content
The currency exchange widget inspired by a popular mobile app implemented using Preact, Meiosis, HTML tagged templates and native ES modules.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
images
mocks
notes
src
styles
.eslintignore
.eslintrc.json
.gitignore
.prettierignore
.prettierrc.json
.travis.yml
README.md
index.html
jest.config.js
package-lock.json
package.json
postcss.config.js
rollup.config.js

README.md

Exchange Widget

Build Status

The currency exchange widget inspired by a popular mobile app implemented using Preact, Meiosis, HTML tagged templates and native ES modules.

Demo: https://sgtpep.github.io/exchange-widget/dist/.

Development

This project doesn't require bundlers like webpack for development and consists entirely of browser-native ES modules and stylesheets which can be served as static files by an HTTP server.

From a project directory run npm install and then npm start to start an HTTP server on http://localhost:8000/. Edit files and refresh the page in the browser to see the result.

NPM Scripts

  • build: Generates the production code by combining, transpiling and minimizing of styles and scripts.
  • eslint: Checks the code for linting errors using eslint.
  • jest:watch: Starts jest in the watch mode.
  • jest: Runs tests in jest.
  • prettier:check: Checks if the code is formatted.
  • prettier: Formats the code using prettier.
  • start: Starts the development web server for serving static content on http://localhost:8000/.
  • test: Run all CI checks and tests.

Unconventional Decisions

  • Whenever possible I prefer functional style in code (except for tests which look better being imperative): arrow (lambda) functions over functions, .map()/.filter(),.reduce(), etc. over for .. of, const over let, expressions over statements, etc. It may look unusual to untrained eye in not purely functional languages like JavaScript but being formatted with prettier, I think, it is quite comprehensible.
  • No dependency on any webpack-like bundler or transpiler for development. I wanted to try out this approach which has its advantages and drawbacks outside of the scope of this document, and, I think, it worked out well.
  • Instead of using one of many ready-made libraries for managing a store I tried to implement Meiosis pattern which took just few lines of code and a dependency on any reactive programming library supporting streams (I used Kefir.js).
  • Without a transpilation it's possible to have JSX-like experience using HTML tagged templates, and I used htm for that (implemented by the developer of Preact).

Tested Browsers

  • Chromium 71
  • Firefox 60.5.0esr
  • Opera 58
  • Google Chrome for Android 71
  • Safari 10.1.2
  • Edge 42

Unfortunately, I didn't have an opportunity to test in Safari on iOS and the latest Safari on macOS.

You can’t perform that action at this time.