zxbodya / Reactive Widgets
Application starter template, for implementing isomorphic widgets, using RxJS and React
Stars: ✭ 51
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Reactive Widgets
Angular4 Admin Front
Admin system front based on Angular. 基于Angular4的后台管理系统(no longer maintain)
Stars: ✭ 36 (-29.41%)
Mutual labels: rxjs
Angular2 Take Until Destroy
Declarative way to unsubscribe from observables when the component destroyed
Stars: ✭ 40 (-21.57%)
Mutual labels: rxjs
Typescript Hapi React Hot Loader Example
Simple TypeScript React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (-13.73%)
Mutual labels: universal-app
Angular Firebase App Starter
The starting point of the Angular and Firebase - Build a Web Application Course
Stars: ✭ 37 (-27.45%)
Mutual labels: rxjs
Rxstate
Simple opinionated state management library based on RxJS
Stars: ✭ 46 (-9.8%)
Mutual labels: rxjs
Flutter Neumorphic
A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible
Stars: ✭ 988 (+1837.25%)
Mutual labels: widgets
Rx.wamp
An RX wrapper library for Wamp in the browser and node
Stars: ✭ 37 (-27.45%)
Mutual labels: rxjs
Evolui
A tiny reactive user interface library, built on top of RxJs.
Stars: ✭ 43 (-15.69%)
Mutual labels: rxjs
Hapi React Hot Loader Example
Simple React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (-13.73%)
Mutual labels: universal-app
Watermelondb
🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️
Stars: ✭ 7,996 (+15578.43%)
Mutual labels: rxjs
Withobservables
HOC (Higher-Order Component) for connecting RxJS Observables to React Components
Stars: ✭ 41 (-19.61%)
Mutual labels: rxjs
Inferno Most Fp Demo
A demo for the ReactJS Tampa Bay meetup showing how to build a React+Redux-like architecture from scratch using Inferno, Most.js, reactive programmning, and various functional programming tools & techniques
Stars: ✭ 45 (-11.76%)
Mutual labels: rxjs
Reactive widgets
Application starter template, for implementing isomorphic widgets(same code for both server and client side), using RxJS and React
It is build on top of following great projects:
- React for a view layer
- RxJS for data layer, and composing asynchronous components
- Webpack to bundle client and server side scripts
- Babel to use next generation JavaScript, today.
- Express.JS for serving prerender application
- Axios for AJAX requests to API
- Jest for tests
- ESLint to watch for coding style issues
- Nodemon to reload rendering server in dev mode
For now, application includes following:
- rx-react-container - Allows to use React as a view layer for RxJS application, and to wait for required data before first rendering.
- di1 DI Container, inspired by https://github.com/angular/di.js but a lot simplified
- Application for server side components rendering
- Example of PHP application that uses components
- Simple widget example
Requirements
- nodejs You will need version 6 or above
- PHP above v5.4 for server side example and composer to install dependencies
Development environment setup
- Check your Node.js version - it should be version 6 or later
- Install dependencies using npm (or yarn)
- start server app, with automatic recompile and reload when something changes
npm run dev
- open this url in your browser:
http://localhost:4000/
(php server should be started at port 4000 to make this working, see instructions below)
To customize host and ports used by application - use environment variables:
-
DEV_SERVER_PORT
- port used by dev server,2992
by default -
DEV_SERVER_HOST
- host where dev server is running,localhost
by default
Same thing about app itself:
-
APP_SERVER_HOST
- host where application is running,localhost
by default (address where app is accessible) -
APP_SERVER_PORT
- port user by application,8080
by default
if you have different application host and port different than above - be sure to specify them in environment
Also you can enable some other things for dev-server by environment variables
-
HOT=1
to enable hot reload for client side
For setting those variables - you can create .env
file at project root.
- To run unit tests:
npm run test
- To check code style
npm run lint
Production setup
- Install dependencies:
npm i
- Build project
npm run build
- Start rendering server:
node ./build/server/server.js
PHP server demo that will use implemented widgets
example is in public folder, to try it:
-
composer install
install dependencies, using composer - start php built in server
php -S 127.0.0.1:4000
- navigate to http://127.0.0.1:4000/ to see results
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].