How stable websites done as a Single Page App/Javascript or on Meteor?


#1

Hi all,

How stable websites done as a Single Page App/Javascript or on Meteor? I tried to find any technical that covers this question, but without any luck.
Basically all frontend is one or multiple javascript files and dynamic view stored in cache or on server

But how stable javascript frontend?I mean, in case of huuuge frontend size will be 2/3 MB with all JS libraries etc, but how stable would it be. The main benefit, user load it only once, but in case 2/3MB it could be too much comparing to typical approach where page size ~500kb
Any use cases, examples, bullet proof tests?

In this case complex website is :

  • marketplace or big media portal
  • From 10000 daily users
  • customized content behavior
  • more than 50 different routes

#2

Single page apps are pretty ubiquitous these days. Most large web apps are single page apps (e.g. Facebook).

They are probably more stable then “non single page” apps, as most of the workload is distributed to the clients, rather than the server having to handle everything for thousands of simultaneous users. This takes a huge load off of the server. Modern browsers are perfectly fine handling large javascript files. Although 2 - 3 MB is pretty big in the sense that it will take a while to load (yes it will be cached after they visit once, but as soon as you make even a small update the entire JS file that Meteor generates will have a new name and thus have to be re-downloaded). I’ve written a very large and complex app using Meteor and it was still only ~800Kb, and I can still optimise that.

In general when building something you shouldn’t worry too much about performance for the start. Build your app and then optimise it when you find the performance bottlenecks. Meteor has been shown to have very good performance in production apps using only a small server.

I remember reading something about the game Dominus which is built using Meteor. It’s a pretty heavy app but apparently it still manages to run smoothly with 200 concurrent users on a single Modulus.io servo.

Another example is Asana, which isn’t built using Meteor but they have their own in House framework called Luna (I think Meteor is somehow based off of that or was started by people who worked on Luna, not sure). Anyway, Asana has an initial page load of 2.5 MB when you are logged in (the main javascript file itself is 1.4 MB). So I don’t think you need to worry.


#3

Hello Coniel,

Great answer for such complicated question. Totally agree about server load, but for me its not so important in this case, I’m worried more about where is the limit of SPA?

Is it possible to see your work where JS size ~800kb?

Regards!


#4

Sure, it’s here : http://beta.coniel.com/

I re-wrote my existing PHP + Angular app using Meteor (it’s in beta, the production version is still running on PHP and Angular).

Now I’m actually re-writing the Meteor version to switch from using Blaze to React, a package only structure and Materialize to MDL and Material UI.

At the moment the JS file is 762 KB and the entire app is 993 KB. I haven’t done any sort of optimisations yet. I have quite a few packages/libraries from which I only use a small part or don’t use at all (forgot to remove some). Later on I will figure out which ones are adding a significant unnecessary load and replace them or simply take the parts I need and create my own streamlined packages from that.


#5

Looks cool!
Are you using angular-meteor package in this app?


#6

Nope, this one is just pure Meteor + Blaze. I considered it at first but I didn’t really see the benefits of Angular over Blaze. Plus I like the simplicity of Blaze (working with Angular in a project this size became a pain and a mess, although it’s probably going to be a lot better with Angular 2).

As I said earlier I’m switching to react now. It’s really great for creating re-usable components (and using ready made ones like Material UI).


#7

From my side:

I’m using angularjs for couple of years and didn’t find any difficulties for now, maybe later :smile:
I have written few projects based on angularjs and still using it, ex: https://github.com/ivanproskuryakov/Aisel.
The approach I’m using for Aisel described here:
http://ivanproskuryakov.github.io/publications/AngularJS-app-architecture/
Its not a promo, just sharing my experience, maybe it could help it your work

+1 Material UI, heard a lot about it. Frontender dev’s love it
+1 for Blaze, i like it