Better web frontend?

[vyamkovyi]

Hi, could you please clarify what suggestions do you have regarding our web panel? It would be a pleasure to see our work from a different perspective!

[ghost]

My suggestions:

• Don't use CDNs (i'm too paranoid sorry)

• Removing Bootstrap (it's almost 140KB, own CSS would be smaller a lot)

• Don't modify DOM by hand (there are a lots of useful JavaScript libraries for building good UIs, for example KnockoutJS, ReactJS and Vue).

• Client-side routing for smooth page navigation (Also, we can use Turbolinks which is good alternative)

[ghost]

It would be good idea to use something like Backbone. Backbone.js already have:

• Client-side router

• Models

• Collections

• Views (You can use whatever you want for rendering)

[ghost]

Also, we should minify and/or build our assets. Builders

• Webpack. Supports asynchronous chunk loading.

• Browserify

Minifier I recommend

• UglifyJS2

[ghost]

Also, SammyJS is good too.

[ghost]

What I dislike in current frontend

• Hard-coding HTML in JS is gross.
• CDN use (which is very dangerous, it's better to store local copies instead)
• This code is painful to maintain
• Modifying DOM by hand is a trash
• Bootstrap which is very fat and ugly

Sorry for long thread but I want to separate my thoughts

[vyamkovyi]

Sure, nothing wrong with this way of expressing your thoughts.

Speaking of CDN, I don't think this is dangerous if used properly. We already use integrity property.

By the way, isn't ReactJS the same as Backbone?

[ghost]

Speaking of CDN, I don't think this is dangerous if used properly. We already use integrity property.

What if we would run it on computer without internet access?

By the way, isn't ReactJS the same as Backbone?

No. Backbone is a MVC Javascript framework but ReactJS is just a library for building views.

Also, Backbone has no built-in templating or anything like this but you can use Handlebars.js or other templating library.

[ghost]

Backbone.js + Knockout.js

[vyamkovyi]

What if we would run it on computer without internet access?

It would be unable to fetch any styles via CDN. I must agree that removing CDN is a good idea, but not because of security concerns. By design, this application may be running inside a network without any internet access.

[ghost]

So what are our plans for refactoring?

[vyamkovyi]

• Knockback.js seems to support localization, which is something important in our case and currently done via Python script.
• A clear separation of logic, representation and control is vitally important as it generally makes code maintainable.
• I'm still not sure, but I think React is overkill in this case and you've listed knockout.js as a solution. If knockback.js offers us a solution, I think we must use it.

At this point, everything listed means we must nearly rewrite entire web panel from the scratch.

[vyamkovyi]

CDN: I don't believe in CDN, to be honest. We're not writing some kind of CNN news website or something that uses so many trackers that saving a millisecond can really help. Even in that case, I think this makes nearly zero sense - just use simple solutions if you really need your website to be speedy.

Bootstrap: writing everything from scratch is HARD. Really, really hard. There isn't a professional front-end developer. We're going to stick with Bootstrap, probably use some generator that can expunge things we don't really use.

[ghost]

Thank you for quick reply! I think your plan is awesome.

[foxcpp]

I'm not professional front-end developer at all, sorry. That's why current web frontend looks weird. If you can take care of rewritting it - you're welcome.

Server/agent-frontend protocol is documented in HTTP_API.md and you can use existing frontend as a example of how it should generally look like (however feel free to change UI if you know a better way to arrange things).

On CDN: I wanted to remove bundled libraries from repositories but I don't know anything about package management in JS world so I just switched to CDN. I was not aware of "no internet connectivity" requirement.

[ghost]

You can use npm, bower or git submodules for package management.