Build Components in JavaScript Without a Framework

Most JavaScript developers have a favorite framework. But what if you just want a simple component on a regular HTML website? Bringing in a whole framework is totally unnecessary. In this screencast, I'll show you how to build a component with plain-old, vanilla, JavaScript!
Okta is a developer API service that stores user accounts for your web apps, mobile apps, and APIs.
* Sign up for Okta for free at developer.okta.com/signup/
* For more info visit us at developer.okta.com/
* Developer Blog: developer.okta.com/blog/
* Follow us on Twitter: / oktadev
* Follow us on FB: / oktadevelopers
* Follow us on LinkedIn: / oktadev

[@rotinaindependente]

It's simple, but works, has organized scaffold and helps with maintainance, great job!

[@andriussokolnikovas1577]

Nice video, thank you. I've just noticed that in hightlitRating function we compare strings; which result in comparsion by lexicographical order, where if we use more than 10 star rating, 4>=10 return true. We should compare Numbers not a strings sm like Number(rating) >= Number(star.getAttribute('data-value'))

[@JohnStrandt]

I knew you should be able to do this, thanks for explaining.

[@alexapostolo3329]

would it not be better to create a custom element that generates the whole star-rater dynamically and then exporting that as a component?

[@jamesmarsh3842]

this man is a reaaal wizard lol.

[@justlutfi2890]

gandarf

[@matthewclarke1926]

Nice ending. I'm starting a new app and want to complety let go of jquery, backbone, require.js, underscore.js... all my front end dependencies. Can you recommend some content that gives an overview of the file structure for a substantial app? Was thinking of using BEM block names to organize the file structure. Thanks for the video.

[@LeeBrandt]

For a "substantial" app, I would probably still use a framework (like Angular, React, or Vue). Just because they have basic standards for project structure that will make it easier to onboard new developers. You _could_ follow one of those structures without it, but there are things like state management and other plugins that will seriously speed up development.

[@vaniad555]

@@LeeBrandt the one thing we should be after a speed up, too bad you stopped at that point :(

[@ashish21999]

Thanks, Please create more such videos.

[@qwertt14]

Great video, thanks!

[@edwardmacnab354]

All these things you NEED that you don't need , is when the snowball starts. And it's a pretty fkd up snowball by this time

[@Simple_Simon_UK]

Why not create a web component?

[@johannesvandemerwe]

great video, I really something here

[@cristian702]

Amazing!

[@pepijn1967]

It appears that in the world right now, one keep on choosing complex solutions like js frameworks which creates a shitload of kb's as it grows and they put even the css and html in the javascript as well and even throws some typescript on top of that (the cherry on the pie....of course), hopefully that is coming to an end....i used es6 modules in a large financial company in 2017 and the developers in the team i was taking part of were very happy with that. In the first place they were yelling for angular...but they made a U-Turn very fast, fortunately

[@sectorx20]

You should try Vue.JS... It's Vanilla with chocolate.

[@Andrew-ch9wp]

Hey Gandalf

[@vojtechsebo4119]

Why new Rater? Rater isnt constructor function ;)

[@duechilidance5388]

the function can be used to contruct a new obj with new keyword

[@vojtechsebo4119]

Ofcourse, but in your case you dont need it.

[@rotinaindependente]

@@duechilidance5388 Yes the function can, but He don't use this keyword and any methods binded to prototype to create instances with this "constructor"

[@rotinaindependente]

Yes isn't a constructor but the new keyword call the function the same way, sooo, whatever :)

[@ertugrulsenceruzun9772]

Dayı yaşın başın kaç olmuş kod yazıyorsun, emekli ol sen boşver

[@BathingAfrican]

lol dawg you look like one of those mysical dev lords

[@kanaillaurent526]

Not a Web component neither a custom element and no unit test.

[@LeeBrandt]

It is a reusable component. Because it's a sample app there are no unit tests..

[@hellelo.5840]

its a resuable UI component

[@rotinaindependente]

Yes just an example, you can create the component however you want, it works and pay the bills :D Now, if you want to add more quality and complexity to your app, this video isn't for you!

[@caribbeanman3379]

Huh! You call *that* a component? A real component would be creating the elements in js, style and all!