Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

Aria CMS [Front-end built using React]

Interesting...
Loyal Member
Joined
Oct 25, 2008
Messages
1,372
Reaction score
604
Hey all,

So back in March, I needed a new project to work on and decided that since I've never created my own CMS, only having edited other people's, I decided I would embark on my own from scratch. Knowing literally zero React, I decided to go with that library instead of the many others I could have used (Angular, Vue, etc...).

After just around 5-6 weeks of active development time, I completed a functional front-end for a MapleStory CMS.

I named it Aria.

Aria is extremely quick and light. Clocking in at under 1MB with images excluded, it is blazing fast. There is no bloat here. No uselessly importing third-party JavaScript libraries just to do simple tasks like using jQuery to do things better written in plain JavaScript, no mountains of unneeded styles due to a CSS framework being used then having the styles overridden, no complex DOM or large node count slowing down the browser, no stupid animations tanking your FPS, no shenanigans.

The browser is given as little JavaScript and CSS to parse, as it should. The browser gets a single tiny CSS file, and a single tiny JS file, that's it. Your browsing experience is clean and smooth.

This is why Aria doesn't have a loading screen like I've seen other sites utilize, because it doesn't need one.

Now with that being said, I want to emphasize that I am only open-sourcing the front-end of Aria in this thread. The back-end, which was written in conjunction with Holthelper and I, will remain private and only distributed to license holders. As of now, only Eric holds a license which he is using with his (upcoming?) Orion server.

Given that the front-end is freely available, anybody with basic web knowledge can very easily figure out the API that Aria consumes and implement their own back-end for it. I encourage this, actually.

In the case that you do not want to, or cannot, build your own back-end, and are interested in a license to use Aria for private or commercial reasons, you may contact me or Holthelper over Discord for more information.

There is an installation guide on the repo itself. I won't list out the features or provide screenshots here because there is a live demo that will talk for itself instead.

Download:


Live Demo:


Thanks and enjoy!

EDIT: THIS IS JUST THE FRONT-END. YOU WILL NEED A BACK-END FOR THIS WHICH ISN'T BEING PROVIDED AT THIS TIME. IF YOU ARE ENTIRELY NEW TO THE WEB, THIS RELEASE ISN'T FOR YOU AND I RECOMMEND CHECKING OUT LITERALLY ANY OTHER CMS.
 
Last edited:
Joined
Jul 12, 2011
Messages
1,229
Reaction score
475
This is kind of a useless release without releasing a backend. Why not extend stormcaster, since you're using Laravel anyway? Why not release a basic backend for others to use? People who have the experience and skillset to create their own backend API do not need your React site. In fact, making a react/vue/angular site that integrates with a backend API literally takes hours (assuming you have boilerplate).

Cool site, and great job on learning React, but this release feels showoff/advertisement to me, which IMO is not the purpose of this particular subforum ¯\_(ツ)_/¯

ps:
- check out redux, it'll solve a lot of state related issues for you (eg. not having to hit the API again on navigating away from pages)
- nice job on the rankings, fast rankings is pretty rare to see. my suggestion for one UX consideration is to retain scrollstate, scrolling up is kind of jarring/annoying
- you should disable debug mode on your laravel api, even if it is just for demo purposes
 
Last edited:
Interesting...
Loyal Member
Joined
Oct 25, 2008
Messages
1,372
Reaction score
604
This is kind of a useless release without releasing a backend. Why not extend stormcaster, since you're using Laravel anyway?

I wouldn't say useless. People release CMS "designs" all the time and don't see that being called useless. Stormcaster is just the backend but even if you never released a client for it, I wouldn't say just a backend is useless, so why is just a frontend any more useless than a design, or just a backend?

You need all three for a production CMS (backend, frontend, and a design), and this release provides two of those three things. But since you bring up stormcaster, people can just tweak this release to use stormcaster if they want, and then this release is essentially the first public production stormcaster client. :wink:

People who have the experience and skillset to create their own backend API do not need your React site. In fact, making a react/vue/angular site that integrates with a backend API literally takes hours (assuming you have boilerplate).

I strongly disagree with this, for multiple reasons.

For one, you should know that simply "integrating with an API" and actually writing the components, logic between components, not to mention all the styles, are two entirely different things. Your stormcaster-vue release is just that, a basic integration with an API. You could write a simple client to consume an API easily, but I don't see how that is at all comparable to this release, something you can actually use in production.

Not to mention that holthelper, the guy who "has the experience and skillset to create their own backend API" had close to no knowledge of the frontend, so no, I don't think that just because you could write your own backend that you "don't need" somebody else's frontend. Also, people who do backend are generally known to dislike design (or like it but can't design for poop) and in that case would still "need" a frontend written by somebody else, which a release like this would resolve for them.

- check out redux, it'll solve a lot of state related issues for you (eg. not having to hit the API again on navigating away from pages)

I didn't really feel this was complex enough to warrant standalone state management. Also, you would still have to hit the API when you navigate away regardless because you are requesting new data when you click on a page you haven't been on before. The only thing that would solve is not re-requesting the SAME data, since you would have it stored already using redux. I don't think the problem of requesting data you already previously requested is really an issue for a MapleStory CMS if you ask me.

There are a few cases where duplicate information is requested, but I think that's fine because information would have needed to be requested anyways, the only difference is that the payload is slightly larger.

If I misunderstood your suggestion to use redux to "not have to hit the API again", feel free to correct me.

my suggestion for one UX consideration is to retain scrollstate, scrolling up is kind of jarring/annoying

Scrolling up is how most users know that the content on the page is "new". On a traditional site, pressing "next" would re-render the entire page, and you would be at the top as well, it's just not "jarring" because the entire browser window flashes white before that. This essentially replicates that same effect people are used to. If anything, the better solution here would be to smoothly scroll up.
 
Newbie Spellweaver
Joined
Dec 6, 2014
Messages
11
Reaction score
0
is there a place we need to put out database info ?
because my ranking is loading all the time and i can't login or join
 
(O_o(o_O(O_O)o_O)O_o)
Loyal Member
Joined
Apr 9, 2009
Messages
1,088
Reaction score
322
This is why Aria doesn't have a loading screen like I've seen other sites utilize, because it doesn't need one.

1cyI0u2 - Aria CMS [Front-end built using React] - RaGEZONE Forums

SharpAceX - Aria CMS [Front-end built using React] - RaGEZONE Forums


For real though it took a second longer to load than i expected, assuming that's cuz it's a demo. Looks pretty dope though. Probably the best way to display character ranking to-date. Shame there's no backbone though, but meh. Still kinda sexy.
 

Attachments

You must be registered for see attachments list
Infraction Baɴɴed
Loyal Member
Joined
Apr 9, 2008
Messages
1,416
Reaction score
169
it only takes that long cause of 1 channel is offline, so a time-out is called so it doesnt take too long.
 
Interesting...
Loyal Member
Joined
Oct 25, 2008
Messages
1,372
Reaction score
604
1cyI0u2 - Aria CMS [Front-end built using React] - RaGEZONE Forums

SharpAceX - Aria CMS [Front-end built using React] - RaGEZONE Forums


For real though it took a second longer to load than i expected, assuming that's cuz it's a demo. Looks pretty dope though. Probably the best way to display character ranking to-date. Shame there's no backbone though, but meh. Still kinda sexy.

I have nothing lined up for what I'm going to release for Christmas 2017 as of yet.

SharpAceX - Aria CMS [Front-end built using React] - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Divine Celestial
Loyal Member
Joined
Sep 29, 2008
Messages
804
Reaction score
219
No uselessly importing third-party JavaScript libraries just to do simple tasks like using jQuery to do things better written in plain JavaScript, no mountains of unneeded styles due to a CSS framework being used then having the styles overridden, no complex DOM or large node count slowing down the browser, no stupid animations tanking your FPS, no shenanigans.

I don't need to be dragged like this lmao.

It looks like if Rien and Orion's site had a baby. I dig it.
 
Junior Spellweaver
Joined
Aug 20, 2011
Messages
127
Reaction score
1
thank you , good job!
how i can to setup this cms?
in config no have root and password db,
what i need to do for work the cms?
 
Interesting...
Loyal Member
Joined
Oct 25, 2008
Messages
1,372
Reaction score
604
thank you , good job!
how i can to setup this cms?
in config no have root and password db,
what i need to do for work the cms?

This is just the front-end, or in perhaps simpler terms, a "coded design". The back-end part isn't public but you can tweak stormcaster or make your own.
 
Newbie Spellweaver
Joined
Apr 30, 2011
Messages
81
Reaction score
35
Looks really really nice and smooth!!
It doesn't really remind me of the old versions of Maplestory which are the servers i like and enjoy. But it surely would be great for newer versions!
Keep doing nice jobs!
 
Newbie Spellweaver
Joined
Aug 17, 2007
Messages
52
Reaction score
7
I'm having some problems viewing this on a mobile device, look at the attachment.
Let me know if you make some changes to this, maybe i'll use it.
SharpAceX - Aria CMS [Front-end built using React] - RaGEZONE Forums

Sendt fra min ONEPLUS A3003 med Tapatalk
 
Interesting...
Loyal Member
Joined
Oct 25, 2008
Messages
1,372
Reaction score
604
I'm having some problems viewing this on a mobile device, look at the attachment.
Let me know if you make some changes to this, maybe i'll use it.
SharpAceX - Aria CMS [Front-end built using React] - RaGEZONE Forums

Sendt fra min ONEPLUS A3003 med Tapatalk

I very recently added responsive CSS, it's on Github but not deployed live. holthelper should be able to deploy the latest soon.

Looks like this on an iPhone 6
pQZFqQb - Aria CMS [Front-end built using React] - RaGEZONE Forums
 

Attachments

You must be registered for see attachments list
Super-Moderator
Staff member
Super-Moderator
Joined
Apr 28, 2007
Messages
1,494
Reaction score
756
Is it a personal preference to create a whole CMS using only React JS or is it proven creating sites using React JS, Angular, Knockout, etc. Is loading way faster than a normal website?

Personally I really do not see any benefits in creating a page which is 100% being generated by JavaScript. First of all, JavaScript will have to initialize every single element. It sounds way faster to use a normal template file (such as HTML, PHTML, PHP) and have your elements initialized in those files. Secondly, if you create a whole website using only JS, you'd have to use AJAX requests and you will have to return the data in some format (JSON, e.g) which you will re-format to readable content. All this combined looks like a longer process to me, because a request will be sent to another file in a certain order. So it'll have to establish a connection to your local files (which probably goes extremely fast) multiple times in a certain order.

The only benefits which I see is; The page loads faster because your browser isn't waiting for the DOM to be ready. But the downside is: everything is being loaded at real-time, so theoretically there are more processes to gather the data from your database and you'll have to wait until the elements pop-up.

I do see a benefit in using these JS Libraries for data which is changing frequently. For example, the player count could be loaded into the website using these libraries to refresh the count without refreshing the page, in this case.

Maybe I'm wrong, I do not have an extreme amount of knowledge regarding these JS Libraries. I'm extremely interested in this, though.
 
Last edited:
Retired
Loyal Member
Joined
May 5, 2007
Messages
497
Reaction score
665
Is it a personal preference to create a whole CMS using only React JS or is it proven creating sites using React JS, Angular, Knockout, etc. Is loading way faster than a normal website?

Personally I really do not see any benefits in creating a page which is 100% being generated by JavaScript. First of all, JavaScript will have to initialize every single element. It sounds way faster to use a normal template file (such as HTML, PHTML, PHP) and have your elements initialized in those files. Secondly, if you create a whole website using only JS, you'd have to use AJAX requests and you will have to return the data in some format (JSON, e.g) which you will re-format to readable content. All this combined looks like a longer process to me, because a request will be sent to another file in a certain order. So it'll have to establish a connection to your local files (which probably goes extremely fast) multiple times in a certain order.

The only benefits which I see is; The page loads faster because your browser isn't waiting for the DOM to be ready. But the downside is: everything is being loaded at real-time, so theoretically there are more processes to gather the data from your database and you'll have to wait until the elements pop-up.

I do see a benefit in using these JS Libraries for data which is changing frequently. For example, the player count could be loaded into the website using these libraries to refresh the count without refreshing the page, in this case.

Maybe I'm wrong, I do not have an extreme amount of knowledge regarding these JS Libraries. I'm extremely interested in this, though.

What specific framework you chose for you SPA (single page application) could depend on many factors. The most reasonable would be to chose what you are most familiar with and what fits best for your system requirements, but most chose to go with whatever the SPA JavaScript hype train says is the framework to use.

Some brief history on the topic: Two years ago, AngularJS (then named Angular) was the framework to use for SPAs. Google, being the owner of Angular then decided to re-do the entire framework and they made Angular 2. This relied on TypeScript which was then transpiled (converted or compiled) to JavaScript before the user entered the page. Additionally, it broke all backwards compatibility and people had to start from scratch with their applications if they wanted to go with Angular 2. This made many people switch to React (owned by Facebook). On top of it all, they decided to name Angular 2 for Angular, and Angular 1 for AngularJS. These three frameworks are vastly different and has quite some learning curve to get productive with. If you are familiar with a traditional PhP stack with jQuery and aJax, it is going to take a lot of effort just to learn the tooling these frameworks require. Then the question is: what will be the next framework on the hype train? To be honest, I haven't really bothered looking into React after having learned AngularJS and some Angular (see how wrong that sounds?).

There are a lot of benefits from using this architecture. Yes, it requires more from the developer and it is a bit more to learn and set up, but in the end you have more or less written an entire frontend application that relies on some sort of API (if you have done things right). Why is this a good thing? It means you can cache the entire front-end very easily through CDNs so it becomes super fast to load (you still have the front-end compilation time, which I will come back to later), the entire front-end application can be easily replaced without changing anything in the back-end API. Architecturally speaking, you get a really clear separation of concerns compared to traditional web sites, where previously everything was floating together. Now you can have a back-end guy working on the back-end, while this fancy NodeJS hipster is working on the front-end and the only information they need to exchange is how the back-end API works. Now your page is split up into a front-end and a back-end you can also implement other applications that rely on the same functionality already being exposed through the back-end API. Although this specific point doesn't make much sense for Habbo, it is one of the factors making people embrace this architecture. Today, web applications are often service-oriented. This means (for example for Habbo), there is some Habbo service that other applications can consume. For example a CMS front-end in either Angular or PhP (yes, you can have a front-end in PhP still being rendered on some server, but mostly resource constrained people like NoBrain does this), or a smart tv app that notifies you when your online Habbo girlfriend messages you.

To get back from architecture to one of the things you mentioned: Loading time. Conceptually speaking, the application would become easier to load over time. First time, the static assets for the SPA would get cached. Then there are the requests for the different kinds of data that has to be displayed. Although you can easily do parallel requests and multiplexing with HTTP 2, there is indeed some transportation overhead from the granular requests that is sent compared to one big HTML document. Then you have the compilation time. This entirely depends on the application and framework you are using. I very often complain Messenger for Windows (which is implemented in some Electron package) is taking more time to start than Visual Studio Enterprise because of the boostrapping with the different JavaScript crap they require to run. But if you are doing it right, e.g. through lazy loading, the page load isn't that bad. In the end, if you are doing things right, users see a far more responsive web-page as their browsers doesn't reload the entire DOM at each page load, but rather swaps the relevant elements. This makes life much easier for resource constrained devices (e.g. smartphones and slow-butt laptops).

Off-topic:
Can we soon Ducking fix that the page doesn't Ducking reload after some time you have been writing? I basically had to rewrite half of this post because of this issue and I would have had to rewrite 2/3rd of it if I didn't copy the text each minute.
 
Infraction Baɴɴed
Loyal Member
Joined
Apr 9, 2008
Messages
1,416
Reaction score
169
thanks for the history lesson

if you have created a road map of how thing will be structured back-end to be displayed, the front-end can use that road map as a template so your not reliant on one another to get testing done.

the benefit of having an api back-end is so that if you decide you hate the design of the front-end you can hot swap it for a new design following the same ajax calls to the back end.

there is no point in fighting which library is better. each has their own pros/cons.

tbh we did this site cause maplebit is old and wanted to make a superior site using react
 
Back
Top