Mini projects built with VanillaJS. No frameworks or libraries

417 点作者 jonifico超过 5 年前

38 条评论

baxuz超过 5 年前

Here's one I did as an assignment for a job interview: <a href="https://github.com/ivancuric/hn-scroll" rel="nofollow">https://github.com/ivancuric/hn-scroll</a>You can see it in action here: <a href="https://hn-scroll.netlify.com/" rel="nofollow">https://hn-scroll.netlify.com/</a>The task was to build an offline capable site which displayed the latest Hacker News posts, and loaded more lazily when scrolling. I had to use the official HN API, and I couldn't have any middleware or caching. Everything had to be done client-side.The app ended up being 1.4kb in total, with support for practically streaming in the items, batching them by network response times and render frames, while keeping the order.You can see the batched items in this version: <a href="https://codesandbox.io/s/hardcore-stonebraker-8m8fx" rel="nofollow">https://codesandbox.io/s/hardcore-stonebraker-8m8fx</a>

评论 #22238042 未加载

评论 #22235309 未加载

评论 #22233942 未加载

评论 #22234256 未加载

评论 #22234770 未加载

评论 #22235064 未加载

评论 #22234328 未加载

评论 #22234577 未加载

评论 #22238964 未加载

errantspark超过 5 年前

I'm so glad to see this and projects like this getting attention. I'm responsible for several tools at my current job using nothing but straight JS, including a couple which have had a significant (positive) impact on the special projects team here.I love JS. I love it's ubiquity (F12 in any browser and you've got a REPL). I love the freedom I have when I write in it to do whatever the fuck I want and shoot myself in the foot in all sorts of strange ways. It's a very expressive language that lends itself to all sorts of fun. I love being able to inline C functions as WASM. I love manually managing memory with typed arrays. I love the filth of it all. It's liberating to give up all your dignity and just fling mud with a big grin on your face because your ridiculous 5 lines are a functional standin for a templating engine.<pre><code> let applyTemplate = template => object => { let keys = Object.keys(object) return new Function('input' , `let {${keys.join(',')}} = input return \`${template}\``)(object) }</code></pre>

评论 #22233680 未加载

评论 #22236370 未加载

评论 #22236268 未加载

评论 #22233592 未加载

评论 #22234253 未加载

adrianh超过 5 年前

Soundslice (<a href="https://www.soundslice.com/" rel="nofollow">https://www.soundslice.com/</a>) — a website built around interactive/responsive sheet music, rendering the music entirely in client-side JS — doesn't use JavaScript frameworks or libraries.I'm the developer of Soundslice and continue to be happy with the vanilla JS decision, 8+ years into the company. It means better performance, clearer code, smaller JS filesizes.I gave a talk about it here: <a href="https://www.youtube.com/watch?v=VvOsegaN9Wk" rel="nofollow">https://www.youtube.com/watch?v=VvOsegaN9Wk</a> ("A framework author's case against frameworks") and here: <a href="https://www.youtube.com/watch?v=XH5EtQge_Bg" rel="nofollow">https://www.youtube.com/watch?v=XH5EtQge_Bg</a> ("How I optimized my JavaScript sheetmusic rendering engine")

评论 #22234182 未加载

评论 #22235039 未加载

Ndymium超过 5 年前

Lately I've really enjoyed writing small apps in vanilla TypeScript. Since the TS compiler generates JavaScript that works in modern browsers and those also support the module syntax natively, you can get away without using NPM and a bundler like Webpack at all. Of course this starts to fall down when you get over a certain size but it works well and is quick to get going with for simple things like this lunch menu I built: <a href="https://gitlab.com/Nicd/sodexo-menu" rel="nofollow">https://gitlab.com/Nicd/sodexo-menu</a>The only gripe I have there is that you need to write imports with a JS extension as the TS compiler won't change them. So to import `foo.ts`, you need to write `"./foo.js"`. The compiler understands it and it also allows the browser to understand it too.

评论 #22233434 未加载

antonios超过 5 年前

It's interesting that vanilla JS feels like a breath of fresh air nowadays. I guess the JS cycle is now complete (?)

评论 #22232931 未加载

评论 #22232944 未加载

评论 #22232989 未加载

评论 #22233087 未加载

评论 #22236421 未加载

jasonkester超过 5 年前

There’s no need for these projects to be “mini”. Javascript and html is a good choice for big things too. It’s still my go to “frontend stack” for lots of stuff today.Here’s a pretty big “VanillaJS” project I built back in 2006, back when we called these things web apps:<a href="https://www.twiddla.com/" rel="nofollow">https://www.twiddla.com/</a>

评论 #22233397 未加载

hilti超过 5 年前

I love these type of showcases. It‘s been a wonderful time when simply upload files via SFTP and had a running application. No need of webpack bundles, vendor libraries to achieve a simple functionality that could be solved in a few lines of code ...I really do hope this kind of developer attitude (writing pure VanillaJS) is coming back.

评论 #22233037 未加载

评论 #22233017 未加载

评论 #22235428 未加载

评论 #22240565 未加载

评论 #22236127 未加载

评论 #22239109 未加载

rikroots超过 5 年前

Some Javascript frameworks I like; some I tolerate. Some (<cough>angular</cough>) I learned to despise.I reserve my love only for VanillaJS.My library for playing with the canvas element[1] is entirely VanillaJS. 0% dependencies. 1000% a learning experience for me, having to seek into the darkest corners of the language to find solutions to problems I didn't even know existed![1] Scrawl-canvas - <a href="https://github.com/KaliedaRik/Scrawl-canvas/tree/v8-alpha" rel="nofollow">https://github.com/KaliedaRik/Scrawl-canvas/tree/v8-alpha</a>

评论 #22235615 未加载

wffurr超过 5 年前

I wish more NPM modules were vanilla JS; then it wouldn't be quite so hellish to audit your dependencies or vendor them.I needed a lib to measure text for layout recently, and ran across <a href="https://github.com/soulwire/FontMetrics" rel="nofollow">https://github.com/soulwire/FontMetrics</a> which is nice and clean and completely self contained. It's a perfect library.

评论 #22237594 未加载

bitL超过 5 年前

Isn't the whole draw.io written in VanillaJS as well? That looks like a massive project:<a href="https://old.reddit.com/r/javascript/comments/9p826q/how_drawio_is_made/e806uf3/" rel="nofollow">https://old.reddit.com/r/javascript/comments/9p826q/how_draw...</a>

dep_b超过 5 年前

I did a project around 2018 if I remember correctly where I did all of the code in inlined vanilla JS. It was simply firing off timed API calls for a pop quiz but it was resilient up to the point where a page reload would simply continue where the last question left off. Maybe 300 lines of code, max. Literally anybody that had to work on it kept asking why I didn't at least use jQuery or another flavor of the month framework."Can you point out in this code where using a framework is necessary?"Never got an answer to that, still people were so nervous about the lack of JS frameworks.

abraxas超过 5 年前

Interesting. As a developer who's done no front end work since the nineties and has had little appetite for getting back into it (after having seen what modern front end devs seem to contend with) I surmise that all those crap.js frameworks of the month don't do a whole lot of useful stuf after all.I suspected as much but was always too timid to speak up when I observed how much noise and fury in the office produced so little UI.

评论 #22233209 未加载

评论 #22233377 未加载

tlbsofware超过 5 年前

When I was working for the USGS I was tasked with making a stream tracer to help the national park service fight oil spills at mammoth cave. However I wasn’t allowed to write any server code due to security issues so I wrote the whole algorithm in javascript. It would take about 1 min to parse all the geojson streams into what what I called a node array which contained all the nodes containing the info of where streams connect and which stream they either flow downwards or upwards into. I eventually learned how to use node.js to allow me to run the node processor on the computer and then to just load the output files into the algorithm to allow the website to bypass this processing. I made a big push to try and open source my algorithm (minus all the confidential data the project had), however the website doesn’t have all the fancy controls that I created for the real project as I was hired by another company fairly quickly once I started applying around with this and a d3.js choropleth under my belt as my 2 first professional projects.Tlbsoftware.github.io/StreamTracer.htmlGitHub.com/tlbsoftware/streamtracer

EGreg超过 5 年前

We built a lot of things with Vanilla JS. You can find them all here:<a href="https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js" rel="nofollow">https://github.com/Qbix/Platform/blob/master/platform/plugin...</a>And the documentation:<a href="https://qbix.com/platform/guide/javascript" rel="nofollow">https://qbix.com/platform/guide/javascript</a>It's open source so feel free to rip the code from there, or just use the full Q.js !For loading code, a long time ago we just implemented two methods:<pre><code> Q.exports(a, b, c) Q.require(src, callback) </code></pre> Following node but just async. It’s simple and it works. We were able to know the name of the latest loaded js file in exports() by a trick of throwing an exception and catching it to see what script was on the top of the stack. All browsers seem to support this.Since it worked back then, we didn’t need anything else. It is super simple to just keep using those things and replace the middleware underneath to whatever is the standard du jour.It's super short and simple, you can implement similar things in your projects:<a href="https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js#L7842" rel="nofollow">https://github.com/Qbix/Platform/blob/master/platform/plugin...</a><a href="https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js#L7826" rel="nofollow">https://github.com/Qbix/Platform/blob/master/platform/plugin...</a>

thrownaway954超过 5 年前

so happy to see brad and traversy media get some attention on hacker news. been watching his youtube channel for a long time and learned so much from him.<a href="https://traversymedia.com/" rel="nofollow">https://traversymedia.com/</a>

评论 #22234811 未加载

naikus超过 5 年前

Cool! I've build a couple of vanilla js projects, a widget and a framework.<a href="https://github.com/naikus/svg-gauge" rel="nofollow">https://github.com/naikus/svg-gauge</a> This one is all in one widget completely in vanilla js. Zero deps. An interesting thing is there is an angular-js wrapper that someone else built on top of this.This one is actually a view lifecycle management framework for simple SPAs and mobile web apps <a href="https://naikus.github.io/stage/" rel="nofollow">https://naikus.github.io/stage/</a> (This site is actually built using the stage)

评论 #22234351 未加载

IMTDb超过 5 年前

Quick / dumb question : in the breakout game example (<a href="https://github.com/bradtraversy/vanillawebprojects/blob/master/breakout-game/script.js" rel="nofollow">https://github.com/bradtraversy/vanillawebprojects/blob/mast...</a>) wouldn't the game feel fast/slow depending on the power of your computer since the physics loop does not make use of the elapsed time between updates ?

评论 #22233925 未加载

评论 #22233911 未加载

rishav_sharan超过 5 年前

Great to see Vanillajs get more attention. I also wrote an article on this topic a while ago; using VanillaJS to create a basic spa<a href="https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng" rel="nofollow">https://dev.to/rishavs/making-a-single-page-app-in-ye-good-o...</a>

cryptozeus超过 5 年前

This is good for practice and learning but honestly what is the point of going backwards. Some of these demos don’t even work on safari in mobile. Frameworks are there for a reason. If one must learn in plain ja then sure go for it but no point knocking down frameworka

评论 #22233481 未加载

fergie超过 5 年前

Its striking how clean a lot of the js code is for these projects. They do so much with so little

评论 #22238420 未加载

allenu超过 5 年前

I normally do iOS development and have been building a few fun sites in the last few years and because I'm not familiar with web front-end frameworks and tooling, all the stuff I've done[1] is done in vanilla javascript. I've found it pretty easy to build things just using it alone, although my apps are just mini projects.[1] See <a href="https://www.ussherpress.com/synthiejs/" rel="nofollow">https://www.ussherpress.com/synthiejs/</a> for a simple synth player using web audio or my request-a-drawing site <a href="https://www.drommysommy.com" rel="nofollow">https://www.drommysommy.com</a>

Aperocky超过 5 年前

A ‘mini’ simulation that I have in pure JavaScript:<a href="http://aperocky.com/prehistoric" rel="nofollow">http://aperocky.com/prehistoric</a>(Mobile not fully supported)Did use Pixi for sprites and display, but that’s kind of unavoidable.

evolveyourmind超过 5 年前

Here is my 120 lines vanillajs neuroevolution flappy bird <a href="https://evolveyourmind.github.io/flappyai/" rel="nofollow">https://evolveyourmind.github.io/flappyai/</a>

jypepin超过 5 年前

A few years ago my work environment became so complex that I felt like I was spending more time trying to code, than actually coding. So I started that thing where on Sunday mornings, I would give myself a couple hours, in bed, to code something simple in vanilla js.It was super fun, and here's the result: <a href="http://jypepin.com/lolz" rel="nofollow">http://jypepin.com/lolz</a>A few of those were harder than others and forced me to re-learn some basic maths. I really recommend doing such a thing sometimes!

carlmungz超过 5 年前

I love seeing vanilla JS projects getting some love. I started one last year (<a href="https://github.com/CarlMungazi/aprender-js" rel="nofollow">https://github.com/CarlMungazi/aprender-js</a>) and I feel it has made me a better programmer.If anyone wants to learn more vanilla JS stuff, you should check out <a href="https://gomakethings.com" rel="nofollow">https://gomakethings.com</a> by Chris Ferdinandi.

limaho超过 5 年前

Here’s a simple game I wrote in vanilla js (client side) two summers ago<a href="https://www.mouse-movement.liammahoney.dev" rel="nofollow">https://www.mouse-movement.liammahoney.dev</a>Heads up it doesn’t work on mobile. Also there some bugs at the end of the game I never got around to ironing out.Code: <a href="https://github.com/LiamMahoney/mouse-movement" rel="nofollow">https://github.com/LiamMahoney/mouse-movement</a>

sstangl超过 5 年前

Here's a simple no-framework points calculator for the sport of Powerlifting: <a href="https://www.ipfpointscalculator.com/" rel="nofollow">https://www.ipfpointscalculator.com/</a>The page is 11KB, loads in 96ms, and makes three requests to one network, two of which are favicon-related.This turns out to actually matter in practice because many of our users are from countries with extremely slow connections.

评论 #22240996 未加载

maggit超过 5 年前

I have recently experimented with writing dependency-free JS. I ended up using Webpack and Babel, but no frameworks or libraries, and I find it quite nice to work with. These are my tips for making the best of it: <a href="https://magnushoff.com/blog/dependency-free-javascript/" rel="nofollow">https://magnushoff.com/blog/dependency-free-javascript/</a>

tomaspollak超过 5 年前

I'm not sure if this qualifies as "mini", but mi chiptune/MIDI player [1] was written without the use of any big frameworks, even though it relies heavily on Javascript, both for navigation, visuals, and of course audio synthesis (via Emscripten).[1] <a href="https://muki.io" rel="nofollow">https://muki.io</a>

mariocesar超过 5 年前

It's not VanillaJS but it feels like it <a href="https://github.com/alpinejs/alpine/" rel="nofollow">https://github.com/alpinejs/alpine/</a> I have been using alpinejs and is really easy to start and complete! something that is difficult to have together.

mLuby超过 5 年前

Love these!Here's Emoji Tetris in 240 lines. Live demo: <a href="https://gist.github.com/mLuby/73316b08c31015e1da813e1fbbed890a#gistcomment-3075305" rel="nofollow">https://gist.github.com/mLuby/73316b08c31015e1da813e1fbbed89...</a>Can also run in NodeJS like so:<pre><code> $ node tetris.html</code></pre>

beardedman超过 5 年前

We need more of these!

评论 #22233013 未加载

erikbye超过 5 年前

Very simple new tab replacement with todos for Firefox using vanilla js.<a href="https://addons.mozilla.org/en-US/firefox/addon/newtabtodo/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/newtabtodo/</a>

aliswe超过 5 年前

I'm making an open source .NET Core CMS where the UI is written in non-transpiled ES6 run natively in the browser - including imports through Javascript modules

klundqist超过 5 年前

I like the approach, but it breaks as soon as you have to support IE11.

godmode2019超过 5 年前

Many of these did not work on mobile. Samsung S5 for context

评论 #22233479 未加载

marknadal超过 5 年前

I implemented an entire database in VanillaJS:It runs in-production with 10M+ monthly users!<a href="https://github.com/amark/gun" rel="nofollow">https://github.com/amark/gun</a> ~13KBI get a lot of hate for not-using-2ton-framework-of-the-month.But I think prioritizing performance is worth the flack.Seeing repos/articles like this deeply warm my heart, maybe us VanillaJS devs are not alone after all!Does anybody have other favorite VanillaJS projects, that they could share?

评论 #22233460 未加载

评论 #22237034 未加载

评论 #22234578 未加载

tasogare超过 5 年前

I just finished coding a few functions in pure Javascript I need for a project (parsing turtle files I have ownership one). After searching for libraries and having read their Github project's Readme, I choose to implement them by myself because making them working in browser (most target Node) and understanding their API would have take longer than doing it myself anyway. The front-end tooling has became a huge mess of tools (none of which I have experience with) so I always keep it to vanilla JS (or TS) to progress on my project instead of learning a tool that might not exists in 3 or 5 years.