Webase! A sister of the Touich2S, kickstart-simple & hugeapp project by The Reactive Stack.
Webase is a Meteor, React and Framework7-Mobile WebApp-Stack based on the kickstart projects by thereactivestack. Remarkable is the use of webpack for chunking and the ability to render both on the server and the client. Hence, Side-Rendering, LazyLoad as default... Webase. This approach enables very low initial load times while being reactive (Meteor) and extremely responsive (React's Virtual DOM meets Framework7)!
The goal of this stack is to make SEO, target conversion and market penetration a first priority with (mobile) apps that deliver value and a rich user experience immediately over the browser.
Clone this project to start a mobile web project using Meteor, React.js, Framework7 and Webpack. Install Meteor, than
git clone https://github.com/WeCareApp/webase.git
cd webase
meteor
Note: In some cases, your local node version needs to match meteors internal node version (LTS v.10.40). If you run into errors on first build, please use a tool such as n
link to conveniently switch to node v0.10.40
. Keep in mind, that the first build can take quite a while (even appear to be frozen) because meteor-webpack
needs to pull in npm. This will change with the upcoming Meteor 1.3 release.
- Distributed Components System
- Lazy Load as default
- FlowRouter as routing
- Framework7 (new in Webase)
- Use TrackerReact (new in Webase)
- Include the simple To-Do app example
- ES6 modules
- Meteor
- React.js
- react-router with server-side-rendering (SSR only runs on
meteor run –-production
! You can disable it by editingserver/entry.js
) - Webpack (bundle your app / assets and send them to Meteor)
- Hot-reload with no page refresh in development mode
- Optimize your code in production mode
- Give access to NPM by using packages.json
#Current State
- the todo-folder naming needs to change
- lazy-load not completely done
- folder structure needs organized
This project started as an exploration of how to incorporate a “traditional, DOM manipulating library” with meteor and react. As a result, it turned out that React is way more resilient than expected: Making it possible to combine fast virtual DOM rendering with the app instance management and CSS3 magic of a library such as Framework7.
Libraries such as Framework7 are build around Ajax and static HTML. I.e. HTML snippets should be generated and provided by a PHP server for different views and components. A reason why client side, DOM-Rendering, engines are becoming generally slow: There is never a “true finished static piece of html” to work with. So engines, such as Meteors Blaze, eventually over access the DOM and everything comes to a crawl. A frustration we often dealt with and also one, that could be avoided if we were working with static HTML again.
With react we are exactly doing that. We bring the static html server directly to the client for instant (virtual) DOM dispatching while maintaining moderate DOM re-rendering and speed. Working with this stack is not difficult but you have to acknowledge that you need to balance yourself between working in ajax like “Static-Style” or decouple a section of the page and work in “DOM-Rendering-Style”. Just mixing styles can get you in trouble. Knowing that, you can use any feature of Framework7 as long you separate those into the respective working styles. Webase tries to be a starting point in that regard: Go into the great F7 docs and try to implement features yourself.
I.e. the To-Do example features a slide-left and than delete button. The sliding is styling / a CSS3 transformation of static HTML (Ajax-Style). The delete function could also be implemented with Framework7s swipeout-delete
class on the task item. But that would violate the “Static-Style” of the component and break reacts rendering. So instead, we delete the task from our Tasks collection to have react update the DOM for us. A beautiful symbiosis.
Webase is just at the beginning but should implement
- View and Page management of F7 through react
- iOS and Material Design
- Workflow to always keep up to the great work of Framework7
- Routing
- Static-Style React Components for some common features
- Chunking for incremental loading
- Keep aligned with Meteor (1.3) and thereactivestack
The Reactive Stack (TRS) link
Webase would not be possible without the amazing work of The Reactive Stack (TRS), namely, Benoit (@eXon).
Analog to the TBS Kickstart-Simple-Project: See here. For now, please orient yourself on the comments inside the code. A more in-depth description of the ins-and-outs incl. gotachs will follow.
Tests, mostly End2End-Tests, are a to-do.
You can use meteor run, meteor build, mup or anything working with Meteor.
meteor run --production
meteor build .
mup deploy
You need to do those 3 steps to make it works with iOS or Android:
-
Add the platform to your Meteor project
meteor add-platform ios meteor add-platform android
-
Allow access to your dev server in your
/mobile-config.js
file:App.accessRule('http:// localhost:3500/*');
-
Replace localhost by your local ip address in
/entry/webpack.conf.js
.
MIT