JS frameworks (vs Shiny) #9
Description
Shiny allows easy creation of the user interface (ui.R) with simple functions for creating the HTML Bootstrap interface with sliders, sidebars, dropdowns and layout containing other elements to be populated by functions in the backend server functions (server.R) that is responsive to the user inputs (as variable input).
I spoke with my buddy Sean Emmer, who's a front end JS wizard having founded and developed the ChatPath app using Angular and React, the two most popular responsive JS frameworks. He thought that recoding the functionality of the Shiny apps I showed him would require a MAJOR slug of development work, a la a team of developers working for at least a year, ie expensive in terms of time and money. So the next question is could we get the Shiny apps to scale? Well yes, we could either:
- Pay shinyapps.io to host with more connections and resources, eg $39/mo for performance boost (8 GB RAM), OR...
- Install open-source Shiny Server on a load-balanced AWS cluster, possibly spun up using Docker
Sean shared links on helpful tools and background for front end web dev:
- Visual Studio Code IDE
- Express JS: Node.js web application framework
- Koa: web framework for node.js
- BEM: BEM (Block, Element, Modifier) is a component-based approach to web development, especially with CSS
- Little UI Details
- Paralect: offshore developers in Belarus used by ChatPath
JS Frameworks
Popular JavaScript (JS) frameworks are:
- React: Facebook backed platform, most popular, JSX not so easy to template at first
- Redux: predictable state container for JS apps
- Angular: Google backed platform, easier but not as fast
- Vue.js: least popular, independent of big biz, lightest framework
Comparisons:
- React vs Angular Comparison: What Fits You Best?
- Angular vs React — the DEAL BREAKER – Hacker Noon
- Angular 2 vs React: The Ultimate Dance Off – JavaScript Scene – Medium
- Angular vs. React vs. Vue: A 2017 comparison – unicorn.supplies – Medium
- Vue.js Is Good, But Is It Better Than Angular Or React?
Extra notes from chat with Sean
- components:
- left hand nav always there
- upper bar, with hierarchical breadcrumb
- list, convo, profile
- headers own component
- class
- CSS bem: SASS preprocessor, WebPack, Ruby based
- build step: SASS -> CSS
- BEM: block element modifier. forces CSS to be reusable.
- borrow from Bootstrap or Material
- button element, color modifier
&__modifier in*.scss- variable sub for function to look: color & sizes
- colors.scss. paletton.com: gives mathematical complements & lighter/darker shades
- cards
- hello world for ui: drag-n-drop for todo list (react example)
- examples: audiences expand/collapse
- dashboards:
- dashboard.stripe.com: kings of ui
- modal windows
- modal component in BEM style: same header/footer
- consistent is most important
- Audience feature:
- boolean search and replace. Rule component in Filters & Audiences.
- Filter builder component
- -> Shiny modules
- "toasters" notifications: modal w/out blocking w/ color coding
- drop-down:
- online/offline
- schedule