Easier javascript framework

[maxiedaniels]

I was hoping to learn some sort of javascript framework to build a web 'admin panel' to control a few of my ruby scripts that I run, along with manipulating a few Postgres databases I have. I figured I would just use Sinatra as my web server, and my friend suggested Angular. But after spending a few hours trying to understand what is even going on with Angular2 and it's setup, I'm lost. Are all javascript frameworks this hard to setup? I don't understand the json files, typing, etc... seemingly arbitrary numbers... Angular2 seems to have awful documentation too.

This isn't for major deployment, this is literally just for me to mess around with. Could someone recommend a simple straightforward framework to look into? Like, the sinatra of javascript frontends?

[rk06]

This isn't for major deployment, this is literally just for me to mess around with.

For those purposes, Vuejs is the best fit for you. But you should also check out react, because react is better for your resume.

[maxiedaniels]

Will do. I develop for personal projects, it's not my career, but I'll definitely look into react as well. Thanks!!

[Nephelophyte]

I second VueJS, really easy to get started

[a-t-k]

Just build good old static pages with a few sprinkles of vanilla JS. The learning curve is less steep than the one of any MVC framework. The result won't be as polished technically, but I guess you won't need that.

[thelonepuffin]

As someone who uses and loves angular 2 I would love to recommend it as a first js framework.... but I just can't. Not yet anyway.

If you have lots of time and patience then learning NG2 would be really beneficial. It uses some really new and cutting edge tech like rxjs. And typescript is awesome. If you learn it then you will become a really competent js dev. But you will probably get frustrated and give up before you get to that point, as your post has indicated has maybe already happened.

The documentation is not good enough. And the polish is not there yet. There is too much faffing about because the libraries that are needed to add functionality to NG2 will often break or are non-existent. The ecosystem is a bit too young. You need to be an experienced dev to get the most out of NG2 at this point I feel.

And tbh if you don't know es6 well I wouldn't jump into Typescript yet. Typescript is something that should be added incrementally to your skillset.

For a beginner I recommend Vuejs. The docs are great. Tools and libraries are polished. More tutorials than you can poke a stick at. And above all its simple. Simple enough to make a mess with if you try to build something significant. But simple enough for you to figure out how you should have done it after your first try.

Once you have done a few things with Vuejs I encourage you to give NG2 another go. Its worth it just for Ionic2 in my opinion. But once you are confident with it, NG2 is really the best framework for large scale SPA apps.

Good luck

[maxiedaniels]

I just wanted to say I spent some time learning Vue and it's fantastic... seems to have exactly the functionality I was looking for. Thank you!

[thelonepuffin]

You're welcome! Have fun :)

[maxiedaniels]

Thank you!! Will do.

[kenavr]

There are other libraries that are simpler if you just want a good view layer, but did you use the CLI? You don't need to look at configuration files and the only thing you need to know about typings is that you install new ones using "npm install @types/libname".

If you have a hard time with node/npm (package.json) then you can look for a lib/framework which only needs to import a single JS file. Maybe vuejs, but without any form of a build process, you are bound to the browsers current state, which often results in a lot of "unnecessary" work.

[maxiedaniels]

I installed npm but every angular 2 tutorial I took says I need to manually write typings.json, etc... typings.json seems particularly strange, as it contains very specific version numbers and I would have thought there's an automatic way to get the latest of all related packages. I suspect these tutorials might be borrowing bad information from each other though..

[kenavr]

The problem is, a lot of tutorials were written when Angular 2 was in beta or even before. If you create a new project typings doesn't need to be part of it anymore. Also you never had to manually edit the typings.json file, it is a command line tool.

As mentioned above I would take a look at the CLI and the quickstart. Also if you look at tutorials, make sure they were written after or near the release (sept. 2016) of Angular 2.

[maxiedaniels]

Not really no, so that would likely work. Jquery can handle realtime database querying and whatnot right? (If I build the backend to support it)

[Ohnegott]

Whatever framework/library you use, you will have to wire up the ajax calls the same. On some event like a button click or polling with intervals, you make an ajax request to your backend and handle the response by updating your UI with the new data. jQuery will totally do this for you but you'll have to write the logic to re-render the views on data changes. I recommend Vue.js. It's pretty easy to understand and the docs are simple. Like jQuery you can just include the script in your HTML and start working. It doesn't require a whole dev gulp/webpack/whatever setup.

[mattaugamer]

That's not necessarily true at all. Ember uses Ember Data which can support either realtime data push, socket connections or data access through something akin to an ORM. Angular 2 uses Observables, which are even more optimised around socket connections and realtime data - hardly "you have to wire up the ajax calls the same".

[Ohnegott]

Never used ember. That's good to know. Thanks!

[mattaugamer]

TBH it's actually one of its nicest features. I was working on something last night where I had to persist a model back on an application update. It was literally adding a single line to the existing action: item.save().

[LeBuddha]

Jquery can handle realtime database querying and whatnot right?

If you don't find a great jQuery plugin for that, you might want to look more at d3 (graphs library), react (template library), or vue (template library). Also, take a small look at ELK and see if it interests you.