Aria CMS [Front-end built using React]

RaGEZONE Recommends

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 bullshit.

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.

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.

Re: Aria CMS [Front-end built using React]

Re: Aria CMS [Front-end built using React]

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

Re: Aria CMS [Front-end built using React]

Originally Posted by greenelfx

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.

Originally Posted by greenelfx

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 shit) and in that case would still "need" a frontend written by somebody else, which a release like this would resolve for them.

Originally Posted by greenelfx

- 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.

Originally Posted by greenelfx

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.

Re: Aria CMS [Front-end built using React]

Originally Posted by SharpAceX

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

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.

Re: Aria CMS [Front-end built using React]

Originally Posted by Novak

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.

Re: Aria CMS [Front-end built using React]

Originally Posted by SharpAceX

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 bullshit.

Re: Aria CMS [Front-end built using React]

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!