Client

Browser support

Ever green browsers

• Google Chrome | Microsoft Edge | Mozilla Firefox | Apple Safari* | Opera

Must drop IE11

• New Edge available in older operating system too (Win 7,8, 8.1 & 10) & Microsoft is pushing towards it. So IE11 support will end in near future.
• Extra polyfill for ES modules (bundle size increases)
• Lack of new features like css variables support (theming) ..etc (as it's not auto updated & no more patch releases)
• Unified automation tools & other libraries support for ever green browsers only

Core Browser Technologies

• HTML for structuring (modular)
• CSS for styling (modular)
• Javascript (+ ES Next) for logic
• TypeScript(Not available Temporarily)

MVVM Framework

Framework	Type	WHY	Comments
Aurelia (detached google)	MVVM	Modern JavaScript (high standards compliance), Commercially Backed, get out of your way	Selected
Angular (google)	MVVM	Popular, framework controlled code
React (facebook)	View	Popular, JSX files + Virtual DOM (non standard compliance)

Note: Migration plan for Aurelia2 with typescript (Mid 2020)

Tools

Name	Choices	Selected	Comments
package manager	bower, jspm, npm	npm	Same for front & backend with huge community (may change after deno adoption)
Transpiler	Babel	Babel	converting Modern javascript to old
Bundler	grunt, gulp, Webpack	Webpack	configuration over code
css processor	sass (pre), post css*	all	structured css (pre), vendor specific & modern css (post)
Version control	svn, GIT	GIT	distributed & powerful CLI
Code editor	visual studio, visual studio code	visual studio code	open source & multi OS support
Linters	CSSlint/stylelinit, eslint, webhint*	CSSlint/stylelinit*	error identification during development/ build management (JS errors handled by typescript)

Note : * denotes to be explored

Standards & Others

• Web components* (use & publish our components too)
• Responsive design
• Material design
  • components by wrapper interface (later can add multi frameworks)
• also check government https://designsystem.digital.gov/
• Accessibility*
• Theming (colour blindness..etc)
  • Single colour (Primary/ Secondary)
  • Gradients (Primary/ Secondary)
  • Default Dark & Light theme
  • Refs :
    • colorbox
    • also check material design color selector
    • Neumorphism shadows
• Internationalization (i18n)
• Localization*
• PWA (offline apps)* //POC shown (Now even Modi Site)
• Animation framework*
• Application State management (fb-Redux / aureliaStore*)
• Server side rendering
• Grafana charts //can give JSON data source
• Alternate to email/sms : open source app notifications like slack or other chat app

Note : * denotes to be explored

caching

• https://github.com/localForage/localForage (prefer) //don't depend on browser cache (think of cleared scenarios)
• https://github.com/pouchdb/pouchdb

Note : * denotes to be explored

Auto Build management

• Build with versioning & auto release notes (GIT) //future devops*
• build time eslint

Third party libs/ tools used

• popper js : Positioning tooltips and popovers //3kb
• https://lodash.com/
• Explore https://semantic-ui.com/
• Instead of jquery try new dom query selectors..etc
• Uppy File Upload
• axios //70k
• Get Schema from data

Temp developer references

• Transparent wrapper //diff between raw property & custom prop

• https://storybook.js.org/ for our components after aurelia2 //create a from from JSON schema, so use similar concepts

• https://github.com/jbockle/aurelia-json-schema-form

• https://jsonforms.io/ //beautiful

• https://github.com/brutusin/json-forms //sample form generator

• create aurelia validation object from JSON schema by a method or just have custom Validate in class which takes jsonSchema. SO using promises style - let's mimic like aurelia validation

• Learna mono repo

  • https://github.com/fullcalendar/fullcalendar //for todo list, appointments..etc