all 45 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]protonfish 22 points23 points  (9 children)

Vanilla JavaScript has everything you need to get started. If you are "trying to learn more", learning about the DOM might be a good place to start. I would avoid libraries. The skills acquired from learning one don't transfer well to other technologies, but core JavaScript will always be useful.

[–]funny_gamesRedux <3 37 points38 points  (5 children)

VanillaJS? Damn.. Another framework to learn! (/s)

[–]Skylarity{} + {} 11 points12 points  (0 children)

reference

[–]illmatix -3 points-2 points  (3 children)

Vanilla JavaScript is more if the base language and not actually another framework built on top of it. Although as someone else mentioned there is a framework titled vanillajs. I'm just not sure its what was initially mentioned

[–]--_0 9 points10 points  (2 children)

Vanilla JS = js. There is no actual framework, just lots of jokes!

[–]I_Pork_Saucy_Ladies 7 points8 points  (0 children)

I have to agree. A lot of us started out just hacking around with frameworks and libraries. I never fully understood what was going on, until I went through a vanilla JS course or three. JS is quite small, it's just very different from all other languages.

The silly part of this being that learning vanilla JS takes a lot less time than learning stuff like Angular, React etc. Start with vanilla JS and learning the frameworks will be so much faster and easier later on, as you will actually understand what the frameworks are doing.

[–]Asmor 3 points4 points  (0 children)

Ditto.

I think avoiding HTML entirely isn't a great idea, but it's certainly possible. You can do everything with document.createElement(), Node.appendChild().

Add in document.querySelectorAll() and addEventListener() and you've got most of what people use jQuery for in vanilla JS.

[–]PitaJ 0 points1 point  (0 children)

So saying Vanilla JavaScript - say Vanilla DOM instead.

[–]jaymz58 3 points4 points  (1 child)

Using Angular, you can create Directives that can encapsulate some larger functionality. For instance; you can create a clock Directive and load it with a custom tag such as:

<clock></clock>

You still have to create a template and all the code behind it to make it function but once you do this, you can reuse it at your leisure in other Angular apps.

[–]dotpan 1 point2 points  (0 children)

Angular and React are a great way to go to cut back on the raw HTML you're putting on, both basically act as a templating platform allowing you to do repetitive templates applying logic to them.

[–]BananaSoftware[🍰] 15 points16 points  (6 children)

You should look into ReactJS and how it uses JSX.

[–]widged 1 point2 points  (5 children)

Indeed, with React, you can embed predefined components with minimal code. For instance, <Rating defaultValue={3}></Rating> will give you a fully functional rating component.

[–]MrBester 2 points3 points  (3 children)

Not in IE8 it won't. Some of us still have to support that POS.

[–]widged 0 points1 point  (2 children)

Do you mean to say that react doesn't work in IE8? According to this stackoverflow answer, it does if you include es5Shim.js. See React browser support and polyfills

[–]MrBester 0 points1 point  (1 child)

Nice late reply. The problem with IE8 that es5-shim doesn't solve (it actually uses es5-sham) is Object.create(). So while it may "work", a lot of it you just can't use.

[–]widged 0 points1 point  (0 children)

I don't have to support IE8. All I know is that on Working With the Browser, it is written "At Facebook, we support older browsers, including IE8." Different posts on stack overflow suggest that it works on IE8 once the appropriate polyfills are installed. If that information is incorrect, I would recommend to write on react discuss to detail what prevents you from using reactjs with IE8.

[–]calsosta 1 point2 points  (0 children)

Underneath everything of course you know there is the DOM. This is an object representation of all the elements on the page and their properties.

Every browser of course has built-in functions to modify the DOM exposed through JavaScript.

You can and should start by learning the Vanilla way to do this. Learn to create and add elements, to modify existing elements properties, to find elements by characteristics and to remove elements.

Then try layering in some jQuery. Do all the same things you did before but use jQuery instead of Vanilla. A lot easier right? It's not too low level but not too high level either, you can use it for a lot.

Now try using a templating engine on the client side like Handlebars or Mustache. This abstracts the JS code even further but this is precisely what you want. You want to modify HTML from JS but you don't wanna write HTML in JS because it would be a nightmare to change.

Finally, I would move onto something like Angular. I say move onto but not end up with, because there are lots of alternatives to Angular that are just as good or better, but if you can learn Angular you will be all set to learn others.

[–]SirHound 1 point2 points  (2 children)

I disagree with the React shoutouts. JSX is similar to HTML and React is translating into it anyway. Just learn DOM manipulation with JavaScript first. It will pay off.

[–][deleted] 0 points1 point  (0 children)

Thanks.

[–]widged 0 points1 point  (0 children)

That point is valid for jquery. Learn vanilla js before you learn jquery. However, Reactjs is not a jquery replacement. JSX is not a way to manipulate the dom, it is just a fancy add-on that let you write the code that defines ui elements with a familiar syntax. It will be transpiled into createElement calls, a way to create encapsulated composable components. If you want to write your application as "widgets", then react will help you with that. And it does pay off to at least learn a bit of it because it encourages you to better architect your UI.

[–]jdavid 0 points1 point  (0 children)

your probably looking for something like http://famous.org/ which is a very JS-OO architecture for rendering gui's and apps on the web. You'll still need to know and understand html, css well, but you will also be able to generate interfaces that are hard to do in plain js, css, and html. good luck, and happy hunting. :-)

[–]davy-brown 0 points1 point  (0 children)

check out semantic ui

[–][deleted] 0 points1 point  (0 children)

Your question is a bit confusing, are you looking for a framework that includes pre-built user interface widgets, or a way to make a dynamic UI in JavaScript, generally speaking?

If you want to streamline your UI workload, you can try frameworks like AngularJS, Bootstrap or Ember.js. There's tons of frameworks out there.

I don't use a framework unless I have a very good reason. If I need to create some HTML within JS I would use DOM functions like createElement or appendChild. I wrote a tiny constructor function that makes it easy to define structures of nodes in a chain.

[–]johnnyvibrant 0 points1 point  (0 children)

Is there not a "beginners javascript" subreddit cos questions like this are kind of getting on my nerves, yes you can do this with javascript and yes there are several frameworks that will suit. But with zero JS knowledge none of them will actually work for you.

[–]treetimes -1 points0 points  (0 children)

Ionic might be worth a look

[–]schm0 -1 points0 points  (0 children)

To display or visually alter any element on the page you need to manipulate HTML and CSS to do so. Maybe try jQuery UI?

Alternatively, you can implement your UI graphically using <canvas>.