Skip to main content

UniversalWebApps

Universal Web Apps / Web Pages

GUI Framework

View / ViewModel / ViewController
- React
  - Learning
    - Pete Hunt's react-howto
    - React - Basic Theoretical Concepts
    - Under the hood: ReactJS
    - SurviveJS React / React Express
    - React Cheat Sheet
    - Best Practices
      - React Bits, React in patterns
      - Functional UI and Components as Higher Order Functions
    - Next Gen - What is React Fiber?, React 16
  - Component Utilities
  - Browser Utilities
  - Use React Alone
    - Redial / React Refetch
    - formik / Formsy React
  - Lightweight Alternative
    - Preact / Inferno
- Angular
- Vue.js
- Cross-framework
  - vuera
Model / App State
- Redux
  - Learning
  - Reduce Boilerplate
    - redux-cube (Author's own project)
  - Connect
    - react-redux
    - reselect
  - Action Types, Action Creators, Reducer Switch
  - Asnyc Actions
  - State
    - normalizr
    - Immutalbe - see Universal Utility Libraries > Standard Library Extensions > FP > Immutable
    - redux-immutable
    - redux-persist
    - redux-undo
    - redux-reset
  - UI Patterns
  - App Behaviours
  - Development
    - redux-devtools-extension
    - redux-logger
    - Testing - see Testing > Web Testing > Integration Testing
- MobX
- Baobab / Freezer
API / Data Source
- GraphQL
  - Learning
    - Queries and Mutations
    - Playground - GraphQLHub, Explore GraphQL
  - State Management
    - Apollo Client
    - redux-source (Author's own project)
  - graphql-anywhere
  - graphql-tools
Offline First
- Learning
  - Designing Offline-First Web Apps
  - Say Hello to Offline First, \ Offline First and the Circle Of Web, Part II: Breaking the Circle
Routing
i18n
- React Intl / React i18next
- React Intl Redux
Monitoring / Error Capture
- react-ga
- redux-segment
- redux-raven-middleware / raven-for-redux
- redux-catch
- redux-beacon
- Services - see Tooling > Workflow > Monitoring
Debugging
- why-did-you-update
Server-side Rendering
- see Tooling > Workflow > Deployment > Publishing App
Static Web
- JAMstack
- see Tooling > Workflow > Deployment > Publishing App
Scaffold / Boilerplate / Generator
- create-react-app / angular-cli / vue-cli
- Next.js
- webcube (Author's own project)
- Starter Kits Recommended by the React Team
- JavaScript Stack from Scratch
- Static Site Generator - Gatsby / Metalsmith / Hexo / Assemble
GUI Architectures

UI Toolkits

Standalone UI Components

Layout
- Grid - React FlexBox Grid
- Masonry - React Masonry Component / masonry-layout / bricks.js / Justified Layout
- Split - React Split Pane / Split.js
- Dashboard - React Grid Layout
Icon
- React Icons / Material Design Icons / Bytesize Icons
Progress
- React Redux Loading Bar / NProgress
Button
- Buttons
- Indicators - React Ladda / Ladda / React Progress Button
Accordion
- React Collapse / React Sanfona
Picker
Input
- React Toggle
- React Input Autosize, React Textarea Autosize
- React Tag Input
- React Autosuggest
- Auto-formatting - React MaskedInput / React Text Mask / Cleave.js
Form
- React JSON Schema Form
Overlay
- React Modal / SweetAlert2 / vex
- React Overlays
- React Notification System / react-notification-system-redux /\ React Redux Toastr / React Notification / React sAlert / Notie
- Drawer - React Burger Menu / React Sidebar / React Dock
- React ContextMenu
- React Block UI
Content
- Carousel - React Slick / Nuka Carousel
- React Paginate
- React Rating
- List / Table - React Virtualized / React Table / React List
- Spreadsheet - React Data Grid / React Handsontable / React Datasheet
- TreeView - React Treebeard / React TreeView
- JSON Viewer - React JSON Tree
- React QR Code
- Email Table - Oy Vey
Editor
Widget

Universal Web Apps / Web Pages