Difference between revisions of "Our SPA"
m (→Technology stack) |
m (→Technology stack) |
||
| Line 4: | Line 4: | ||
Our system uses [[NodeJS]] on the server side with [https://feathersjs.com/ FeathersJS] for authentication (using [http://expressjs.com/ ExpressJS]) and real-time bidirectional communications (using [https://socket.io/ SocketIO]). We use [https://www.mongodb.com/ MongoDB] for our ''no-SQL'' database layer and [http://mongoosejs.com/ Mongoose] to integrate it with NodeJS. On the client side we use the [[VueJS]] framework for templating and component model with the [https://router.vuejs.org Vue router] and [https://vuex.vuejs.org Vuex storage layer]. | Our system uses [[NodeJS]] on the server side with [https://feathersjs.com/ FeathersJS] for authentication (using [http://expressjs.com/ ExpressJS]) and real-time bidirectional communications (using [https://socket.io/ SocketIO]). We use [https://www.mongodb.com/ MongoDB] for our ''no-SQL'' database layer and [http://mongoosejs.com/ Mongoose] to integrate it with NodeJS. On the client side we use the [[VueJS]] framework for templating and component model with the [https://router.vuejs.org Vue router] and [https://vuex.vuejs.org Vuex storage layer]. | ||
| − | To manage all our separate source files, assets and dependencies we use [https://www.npmjs.com/ NPM] (Node package manager) and [https://webpack.js.org/ WebpackJS] (see [https://dev.to/nitishdayal/stages-of-learning-webpack-pt-2---the-config this] noob intro) | + | To manage all our separate source files, assets and dependencies we use [https://www.npmjs.com/ NPM] (Node package manager) and [https://webpack.js.org/ WebpackJS] (see [https://dev.to/nitishdayal/stages-of-learning-webpack-pt-2---the-config this] noob intro) which integrates tightly with NodeJS and it's build process. |
== Application initialisation == | == Application initialisation == | ||
Revision as of 13:21, 1 August 2017
We're currently working on several apps which are in the form of Single Page Applications. The general purpose which is in common with all the projects is that they're all asset (products, services, currencies etc) market-places which require user profile, account and authentication, Google map integration (since the listed assets usually have a location aspect), asset filtering and searching, auction aspect, feedback and asset-specific discussion. All this requires real-time bidirectional communications and back-end database integration. This article describes the details of this common SPA market-place structure.
Technology stack
Our system uses NodeJS on the server side with FeathersJS for authentication (using ExpressJS) and real-time bidirectional communications (using SocketIO). We use MongoDB for our no-SQL database layer and Mongoose to integrate it with NodeJS. On the client side we use the VueJS framework for templating and component model with the Vue router and Vuex storage layer.
To manage all our separate source files, assets and dependencies we use NPM (Node package manager) and WebpackJS (see this noob intro) which integrates tightly with NodeJS and it's build process.
Application initialisation
When the application starts a number of requests to the server side need to be made for things such as user and localisation details. Before this information has arrived and been used to initialise the environment, the site should show only a loading screen.
This has been done by initialising the Vue router with a default "catch-all" route to the "Loading" router component. The initialisation sequence is then run (using $.when so they can all load asynchronously in parallel), and then the proper routes are switched in on completion and installation of the sequence. This is all done in main.js directly after the instantiation of the main App Vue component since the initialisation sequence depends on the Vuex App.store object.
