Building a Cutting Edge ROBLOX Website

MVCprimary

At ROBLOX, we believe user experience is of the utmost importance. Today, ROBLOX Software Engineer, Navin Lal, tells us about how ROBLOX is building a faster, more responsive website with the help of MVC and a new pagelet architecture.

The ROBLOX website is built on top of Microsoft’s ASP.NET.  Originally a Web Site project built for ASP.NET 2.0, the site has undergone several upgrades since, most notably an upgrade from ASP.NET 2.0 to 4.0 and a conversion to a Web Application project.  Our next big upgrade will be to add support for ASP.NET MVC. As you may know, MVC is a software design pattern that separates an application into three roles: models, views, and controllers.

Here is a deeper look at MVC:

  • Models encapsulate the core logic of the application, such as persisting state and performing actions to alter its state.
  • Views make up the user interface.  They present model data and are the entry points for users to interact with the application.
  • Controllers are responsible for processing user input and coordinating interactions between models and views.

MVC enforces a clean separation of concerns that makes it easy to develop, test, and maintain each role independently.

For some time, we have been using ASP.NET MVC to develop components apart from the main website. The original services built to support the iPhone app were built with MVC 2. Because it provides a flexible routing system that maps naturally to RESTful services, all of our core data and API services are developed on top of MVC 3.

We knew that we wanted to use MVC for the website, but there was a problem.  At over 3800 files (that’s excluding the majority of our data/business logic code, which are in separate assemblies), the website is big and migrating everything to MVC would be a monumental task.  Like everything we do at ROBLOX, we chose to take an iterative approach.  Since MVC and Web Forms are able to be run side by side in a single project, we decided to build new features in MVC and gradually migrate over older features as we update them.

MVC 3 will help us eliminate a lot of boilerplate code and will make unit testing easier since it has excellent support for dependency injection and inversion of control. This translates to faster development of features and a higher level of quality. The framework is designed to be completely extensible so we will be able to customize the site to our player’s exact needs.  Thus far, the only thing we have added is our own attribute routing system after being convinced by Kevin Montrose of Stack Exchange.

Migrating to an MVC site brings ROBLOX into the modern era of web development, but we’re planning on going beyond this and into cutting edge territory.  We’re building a pagelet infrastructure akin to Facebook’s BigPipe. If you’re unfamiliar with pagelets, the idea is to break up a single web page into small parts that can be served independently.

Here is an example of what this looks like.

pagelets

Conceptually what is happening is that every red box now loads separately and in parallel. Before, the entire page was essentially one big red box – it loaded all at once in a sequential manner. Processing all the content in parallel should decrease page load time and increase website responsiveness.

The traditional model for serving web pages starts with the browser making a request to the web server. The web server will process the request, gather any necessary data from databases or services, take any actions, and then render the appropriate content before sending a response.  The browser will construct the DOM from the HTML, download and apply any CSS, and then download and execute any JavaScript synchronously.

MVC2In a pagelet model, the web server gathers only the bare minimum to serve the request, and then it renders back a page that is mostly static with scaffolding for the pagelets.  Each pagelet is then fetched in parallel.

MVC3Despite the cost of extra resources, parallelizing has obvious advantages for speed, and it also isolates each component so they don’t end up blocking one another.  For example, let’s say you have a page that needs to fetch data from several different data sources.  In a traditional model, if one of those sources is slow, the entire response will be blocked, and the whole page will load slowly.  With pagelets, only the components depending on the slow data source would be affected; everything else would load normally.  Pagelets allow for a fast initial page load with additional dynamic content loaded in as it becomes available.

To support pagelets, we’ve built a JavaScript loader capable of lazy-loading resources asynchronously.  This allows us to load and execute scripts at the exact moment they are needed instead of loading everything at the beginning. We’re also adding support for defining re-usable modules, which is loosely based on the Asynchronous Module Definition spec.  Modules have the ability to list their own dependencies and make dependency management for JavaScript files much easier, which is almost a prerequisite for loading scripts asynchronously.

The migration to MVC and pagelets brings ROBLOX to the forefront of web development. This has been a large technical investment for us, but it will pay off greatly in terms of developer productivity, site performance, and most importantly, user experience.

 

About Navin Lal

Software Engineer, ROBLOX @NavinBot on Twitter

146 thoughts on “Building a Cutting Edge ROBLOX Website

  1. TARDISman67

    u know,i thiink we should go on with it and have the cutting edge website,who’s with me?

  2. Imspartan9002

    What happened to uploading meshes? And ROBLOX, why did you delete InsertService? You basically squeezed the life and fun out of ROBLOX. You may have well just lost a member.

    1. meaxmsbro

      Wow spart, you read my mind. Until someone told me ROBLOX deleted Insertservice, I wondered why insert games didnt work..

    2. mil0209

      Wtf.. they never deleted insert service, they just simple placed it another spot.. a harder spot to get to, if you don’t have a clue.. but! They never deleted it. Send me a message for more info.

  3. Imspartan9002

    The new site UI update is pretty much broken when using Chrome. The UI displaying ROBUX,Tix,etc, slides up into an unusable spot. I am very frustrated with this. Why couldn’t you just leave the top bar stationary?

    1. legoPringles

      Exactly what I was thinking! If only Chrome had a Compatibility View like IE.

  4. Cale007

    I agree with a day called ‘ancient day’ when will the in game charecter change be out.

    1. Bivv

      I agree, I liked the force field in 2010, there was no lag, and now our modern force fields make lag…I just liked it in 2010 when the force fields were squares around your avatar and changed colours…I was so nice.

      1. markgreen

        OMG I LOVED THOSE THINGS!!!!! :D Those were so epic, now we got new ones… -_-

  5. robloxgametester2479

    u know roblox u should enable all saftemodes on roblox because its not fair on the people who onlysafechatter

    1. Joe

      Right, Ok, So Lets go join a war group where there are no shouts, Talking on walls, Or commands given in game. Wait untill your 13. -.-

  6. Makeash

    You know what they should to BRING BACK OLD ROBLOX or atleast have a day called ancient day once a year were roblox is how it was back in the day

    Makeash

    1. BabyBronBron

      I so agree, make it once a year called ”Ancient Day” to where everything on roblox was how it was in 2006. Now THAT would be epic. Many veterans would come back just to see 2006 once again.

      1. warioman21

        yea so like one day in the whole year it be like roblox on 2006 called ancient day so it would be totallly epick to the people who havent expierenced old roblox

  7. stewey1234

    can u please make it to were it goes faster and have free bc tbc and that would be awesome if obc was all free

      1. leolion113

        Well that’s not the only thing that keeps them afloat, but yes making BC free would be a disaster.

  8. obenta5

    cool. I think we should go with the new…. btw has anybody seen jjbagels or redlink75 lately?

  9. googoo217

    I think this is a great idea for roblox but i still think that the people who run this should advertive all over the internet

    1. Jbug55

      Do you not understand? It cost REAL money to run REAL ads. But the money coming from customers buying ROBLOX Cards can probably be used for it.

  10. makaroony

    Everything is fine except the time it takes to tell you your friend has moved to a different place….

    1. cardgamechampion

      OMG, this is a probably easy thing to do that EVERYONE, the admins and us, forgot completely about, the fact that it takes forever to follow someone to a game and update what place they are in. ROBLOX should fix this, it’s been about a year. I am soo glad they are taking our opinions, I think overall the admins are great, and are trying really hard, and being successful so far.

    1. Yellowfang671

      Roblox rules, and I hope that one day the creators will make it so you can wear more than three hats XD I always wear a hat, hair, and glasses, but I wanna wear wings too.

    1. amy180

      NO!!! minecraft is classic, so is ROBLOX, keep it with the stamper tool, roblox!

    2. JinKasama1

      Would you please keep that kind oi stuff to yourself ANONYSMES, I mean,really, they are different games, don’t make me start ranting. I play both games, so I know what your getting at, but canyou please keep that between yourself and others besides ROBLOX? Thanks for co-operating.

  11. Rany100

    I like how you are helping new people out but please don’t get carried away. You need to balance out the Newbies from the Vets. I am already mad enough about the new stamper tool.

    1. TerexEquipment

      I completly agree. Because of all the newbies, Roblox thinks they ‘HAVE’ to make all these rediculous changes that destroy the origional Roblox.

      1. Shadic707

        But what if we could actually change our own page like on roblox i mean like give us some choices and some colours so we could change backroom or even upload on?

  12. Miley541

    I like the idea of less lag and better user experience, but as far as the interface of the roblox website goes, it’s just fine, no need to make straight edge seperations.(especially not in red, gosh) I disagree with it being ‘hard to understand’. The set up is somewhat simular to facebook; facebook is very easy to understand, visually anyway, and it’s not hard to tell what is going on. As for the color, just because red is the compliment of blue doesn’t mean that red is always flattering, especially in this case. :) This is just my opinion and you may not agree with it, but just take it into consideration. :)

    1. Xanderal32

      I believe those red lines are just to show you the sections being divided, not how they’ll ACTUALLY look.

  13. crafty505

    Well some people on roblox are only 12 and under and such (some are older) but you really need to make this easier to understand :l

  14. Malcolt3

    Glad to see that Roblox is working to decrease lag and improve the user experience.

    1. mrgumboy

      I am happy they are decreasing lag. The site is horrible right now. But if the decrease the lag it will be the best site ever. Well, second best. Facebook is the best!

  15. MehCooky

    What does this mean..? Considering most people on this game are 14 and under it seems like you could dumb down your articles a little.

  16. cardgamechampion

    You admins were never bad in the first place – rumors happened. You guys were and always will be great. This is a great idea, and I am amazed at your effort to do exactly what we want. Great job. Continue to do this, and ROBLOX will be better than 08.

Comments are closed.