Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

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

Topics

Resources

Releases

No releases published

Packages

No packages published