14 ms·
Look ma, no React: I recoded my portfolio site with vanilla everything
- eimrine 3y agoCan I write a React app and recompile it as a vanilla? For example to take all involved parts of the library and not take the rest.
- eropple 3y agoThat doesn't really parse. React as a thing is some pretty thin DOM manipulation and some helper stuff. Are you thinking of something like Next or some all-in React+Redux stack?
- recursive 3y agoAs misfortune would have it, I spent a significant fraction of the day reading the implementation of hooks for fibers. There's nothing light weight about virtual Dom, reconciliation, and micro task queues.
- willsmith72 3y agoYou mean a normal react build?
- wooly_bully 3y agoThis is what Svelte does, React has a runtime even when bundled
- llanowarelves 3y agoIs that like Astro?
- naillo 3y agoThe reason react was developed is mostly null at this point. Modern javascript is so fast and plesant it's hard to imagine many real reasons you can't stay entirely within vanilla.
- andsoitis 3y agoReact wasn’t created because JS is slow, but rather to streamline and speed up DOM operations.
- quest88 3y agoThat statement indicates you don't know why react was developed.
- cj 3y ago> That statement indicates you don't know why react was developed. Why was it developed?
- papichulo2023 3y agoHint: it was not because the performance nor the JS language limitations. You can google the rest.
- cj 3y agoI am friends with the original 2 React founders who I met at facebook. I don’t need to Google, I’m asking because the comment was lacking substance and wasn’t adding value to the conversation.
- post-it 3y agoI find state management to be much easier with React. "All state is lost by default when any variable changes" is a fantastic starting point.
- password54321 3y agoRecently tried no framework, Jekyll, Next, Astro and finally SvelteKit. The only one I liked was SvelteKit. Not interested in reinventing the wheel (no framework), dealing with lots of boilerplate and over-complication (Next/React) or using multiple UI libraries (Astro). SvelteKit is a fine balance between simple and providing enough functionality that allows me to focus on generating content with minimal friction.
- microflash 3y agoI'm glad this works for them. Personal websites and portfolios are a reflection of people on their journey. If it is built with React, maybe they are learning React. If it is vanilla JS, maybe they appreciate the flavor of vanilla. Instead of making sweeping statements about the choice of stack, I appreciate that someone took their time and built something of their own. Congrats. Next thing they should do is an accessibility audit and learn from it.
- dieselgate 3y agoI like using react from a cdn and rolling it out when needed - kind of the best out both world
- skeptrune 3y agoPug is the most disgusting piece of sh* to ever exist.
- ofrzeta 3y agoAbout that Paperfuge analogy ... maybe I am stupid or overly skeptic but I haven't seen that paper wheel carry any samples in the video. If there was some solution to mount samples (symmetrically I'd guess) it would become quite dangerous to rotate them 120.000 rpm without any enclosure, right?
- rikroots 3y agoI could see a thin red tube (or maybe two half-tubes) which marked a sort of diameter line across the cardboard disc. For separating blood to get a concentration of plasmodium cells for quicker identification/diagnosis it should be enough?
- antigonemerlin 3y agoA company I used to work for used react to build the app, and Wix for the site.
- laurels-marts 3y agoWhy choose pug over EJS? When I started my first Node/Express project I picked pug too but quickly realized it was too removed from vanilla HTML I was seeing in the books/MDN and switched to Handlebars. Immediately discovered that Handlebars didn’t have a built in support for something fairly basic I needed and I either had to roll my own extension to it or look for something else so I ended up switching yet again to EJS and I’m still using it a year later today. EJS is perfect if you want vanilla HTML + vanilla JS.
- dodslaser 3y agoI have a nitpick re: the centrifuge example While the paperfuge is cool and may even reach higher RPM/G than some bench top ultracentrifuges, it cannot do so consistently. Putting "Samples were centrifuged at whatever amount of G:s yours truly could crank out on a hand built paperfuge for a solid 10 minutes" in the materials and methods section doesn't exactly scream reproducible science.
- imiric 3y ago> A developer needs a website to prove they can build a website. Not really. Doesn't your experience, reflected in your CV and the technical interview, already prove that? A portfolio site is nice to have, particularly if you're a designer and want to showcase your work, but it shouldn't be a requirement for a developer, frontend or otherwise.
- thelight453 3y ago[dead]
- thelight453 3y ago[dead]
- velvet6755 3y ago[dead]
- velvet6755 3y ago[dead]
- prada574 3y ago[dead]
- zeroonetwothree 3y agoYes you don’t need React for a static site. Is this news at this point? Also I find the colour scheme hard to read but maybe it’s just me.
- camillomiller 3y ago[flagged]
- willio58 3y agoReact isn’t complicated. It’s not even considered a framework, it’s better described as a library! It’s a great way to templatize your code. Is it the only way? No. Do you even need to templatize your code? No.
- quest88 3y agoStop it. You know what they mean.
- eropple 3y ago"What they mean" isn't correct or reasonable and is largely part of the same grumbling groupthink that willfully refuses to come to grips with the realities of the tools they've decided they don't like. React is not large, is of moderate complexity (most of the complexity of "a React app" lives well outside of React itself), and can be stripped down to a fully static templating language without much effort. As I've linked elsewhere, I turned React into an email templating engine once because I don't like Handlebars; rendering JSX as static, no-JS HTML is a one-liner when you throw it a React component. Using React for a static website is totally fine. So is not using it. Being weird about it is not fine.
- yitianjian 3y agoMy hot take: there's a general feeling of looking down on "web devs" or UI/front-end stuff. It's not really necessary to have React for a portfolio site, but it's not really an issue if they do.
- tjoff 3y ago* [...] brought to you by vanilla everything. No Javascript frameworks, CSS libraries or flashy animations. [...] * Proceeds with a distracting animated image of the old portfolio, thought that was funny.
- beej71 3y agoBut not flashy! :)
- awestroke 3y agoReact is a great tool for building complex, large applications. Your blog is not large or complex.
- arrowsmith 3y agoIt's barely even an "application". The entire thing could be rendered as static HTML.
- bdcravens 3y agoEven many sites that are large and complex would benefit from being a server-rendered app. I've come across way too many sites that break in bizarre ways, and all they are doing is displaying text or HTML forms. Every time I check, they are React or Angular sites.
- JohnFen 3y agoI think this is a pretty awesome statement. I'm always unreasonably pleased when I see a web page that embraces appropriate simplicity. > Coding a basic vanilla multi-page application (MPA) saves time in development (goodbye babel/postcss/SSR config) and builds are fast (this site builds in less than 1.2 seconds). I'd hope that builds would be on the order of a small pile of milliseconds! (or zero: a site like that could just be handcoded, really). > I'm only using these 2 lines of Javascript to add the current year in the footer copyright tag This could also be eliminated. At least in the US, there is no legal reason to add a copyright notice at all, and you certainly don't have to add a year. Those requirements were removed years ago. But, if all you want is the year, why not do that server-side? Or bake it into the html and set up a bit of automation to replace the year with a new one every Jan 1.
- robertoandred 3y agoThere's zero need to set up babel/postcss/SSR. Those have all been handled by frameworks for years and years.
- jallen_dot_dev 3y agoIs it even correct to automatically update the year? Shouldn't the year be whenever the work was created or revised? Which could be set at build time. Another advantage of setting it in the build is it'd show even without javascript. If I disable JS, no copyright statement at all appears on the page. So if it was really necessary to declare your copyright, then would it mean anyone who disables JS can freely infringe? I agree just leaving the copyright out of the footer would be best.
- adregan 3y agoI am of the opinion that what you are suggesting is correct. You don’t want a programmatic copyright because you want the copyright to reflect the date created as that when the right begins, and it continues from there without need for refreshing.
- terminatornet 3y agoI think it's also incorrect because it's getting the date client side. so it would just display the local client's year, not necessarily the correct one.
- deleted 3y ago[deleted]
- degun 3y agoJumping on the React hate train has become a trend these days, but it still has its place.
- shmde 3y agoShitting on React is one of the easiest way to reach the HN frontpage.
- thiht 3y agoOf course it has its place. Not for a blog though, it makes no sense
- rmilejczz 3y agoIt doesn’t really matter what you write your personal blog in lol I’ve created some egregiously over engineered personal projects over the years just for the sake of learning a new technology
- degun 3y agoYou can achieve very good results with Next, by using SSG, SSR and ISR. That implies being very comfortable with React. Otherwise there’s tons of solutions for a blog scrnario.
- bdcravens 3y agoIt has its place, but there's no shortage of React sites where it's misplaced.
- pwdisswordfishc 3y agoReact hate train has its place indeed.
- carlossouza 3y ago> I became a dev when everyone was hiring for React, so React is what I taught myself immediately after bootcamp in the scramble for a job A better education path (in a bootcamp, university, book, youtube, whatever) would start with the fundamentals and build it from the ground up... not the other way around. (I just realized how lucky I am for being taught in the best possible order, from the ground up... first the basics... and how so many people didn't have this opportunity)
- agumonkey 3y agoI have a strange feeling about the industry. It seems better received to know a framework 30% (or enough to make simple/intermediate things) even if you know next to nothing about the underlyings rather than the opposite. If you're an ES6 master but can't mesh well with react tasks / react convos in daily you will look as less useful.
- majesticglue 3y agoI disagree. It's like telling someone who is somewhat interested in building cars to learn how an engine works before having them on the ground playing with the actual car parts. The issue becomes not whether they'll learn, it's about whether they WANT to continue to learn. Most people when they want to start coding, would rather want to build cool things. And then later on, they'll naturally be more interested in the fundamentals. I argue that this is why schools are terrible for teaching. They try and teach fundamentals without making kids interested in the topic first. As someone who taught many kids, the struggle is always making them interested, not the rate at which they learn. I remember when I started programming, the worst advice i got was on stack overflow, that I should learn from this thick c++ textbook as a start... Wasted couple months on that book, where the concepts went through one ear and out the other, became extremely disinterested. Only until someone told me to just learn Javascript and build things was when I progressed and learned rapidly. Took me only a year after that to get a job with me becoming interested very quickly on learning fundamentals from there. If I kept learning from a book, it would've taken me several years before I got to even building. It's silly to assume someone who learns from the top down can't learn the fundamentals at some point. Now I've learned game development and currently learning ai on the side. I've tried bottoms up learning many times, but it is incredibly slow to get my goals. Top down and learning fundamentals after you get your hands dirty has been the absolute fastest way for me to learn new topics. With bottoms up, while you may learn many of the basics, you also happen to learn a bunch of extraneous information that you may never use, and will forget because you don't use it.
- city41 3y agoMy website is also completely static, but made with React. That means no React at all at runtime, it is completely static. React does not automatically mean dynamic. I get all the benefits of both. I love the flexibility nextjs provides here.
- SkyPuncher 3y agoI love React as a templating language. I find it very easy to use since JSX is very close to actual html.
- embit 3y agoYes this is correct. It’s perfectly possible to build purely static website by react and nextjs
- asynchronous 3y agoNextJS really does feel like a featherweight React in all the best ways
- deleted 3y ago[deleted]
- willsmith72 3y agoI don't get the value prop of all vanilla. The overhead involved in building a react app is nearly nil with all the tooling we have. Sure CRA was slow, but vite makes things sub-second again. It's like when remix people talk about progressive enhancement to me. Sure, cool, you can do things differently. But why? If you already know the ins and outs of a framework or tool and are productive with it, use it. I'm never gonna hire someone because of how much they "flexed" with their vanilla site, just like I won't hire someone who flexed with their cool fresh-from-bootcamp react animations.
- aobdev 3y agoIt’s not a value prop, it’s just a statement of remembering to use the right tools. You even mention this yourself, just not explicitly, when you say “react app” and “vanilla site”. They serve different purposes and I’ve worked with many people who do not understand because react is all they know. Remix is an improvement over react as a framework though because you can fall back on native browser functionality where the framework will fall short (high latency, slow devices, no JavaScript).
- willsmith72 3y ago> remembering to use the right tools 100% agree here. But if I were going to rewrite a whole application, I'd need a really good value prop. > high latency, slow devices, no JavaScript I don't see why high latency would be improved by remix, you're still fetching everything it's just without the waterfall. I've yet to see a modern-ish device (going back to iPhone 7s) that struggle so hard with rendering that progressive enhancement is valuable. Are there modern devices which are that slow? Or browsers without js?
- aobdev 3y ago> you're still fetching everything it's just without the waterfall It's exactly because of the waterfall. If I have to make 3 roundtrip fetches, and the latency of each is increased by 150ms, then eliminating 2 subsequent fetches will save me 300ms. > I've yet to see a modern-ish device (going back to iPhone 7s) that struggle so hard with rendering that progressive enhancement is valuable. I have used an uncountable number of websites that are extremely janky, slow to load, and overall unpleasant to use on mobile while traveling on trains and busses between cell towers. Some of that can be attributed to ads but the reality is you don't need SPA's to serve news. Remix is cool in that it lets you develop like an app but serve like a website.
- PhilipRoman 3y agoUnrelated note, but I had never heard of the paperfuge, thanks for teaching me something new!
- evandale 3y agoI've tried learning Ember, React, and Vue and have tapped out pretty early. Now I'm learning how to build a site using only vanilla JS and doing everything from scratch unless I find a reason to switch it. I think I'm making decent progress. I even wrote my own simple test framework that shoves the results on the bottom of a page. After adding a few features I decided to switch it to Jasmine. One thing I'm noticing is how often you need npm which I find very annoying. How is a JS library or framework anything more than a single JS file that you have to include in your page? Why is everything npm this and yarn that? Jasmine has standalone install instructions that are easy to find but I can't say the same about Jest.
- gochi 3y agoI'm confused by this, why do you think npm is needed? It just acts a central repo, you're free to self host the JS file yourself or pump it through a CDN. Jest is a different story, it's not a single JS file and has many dependencies. Running it globally is an easy way to reduce the need to include it per project.
- sfn42 3y agoPeople use package managers because it lets us find everything in one place, install it and keep it up to date easily. I'd much rather do `npm i whatever` than having to hunt down a bunch of git repos and copying files over and when they're outdated having to do the same thing to update them etc.
- osullivj 3y agoDitto on Ember, React, Vue and Elm. Was a jQuery minimalist, nut now moved on to Haxe-HTML5. Yes, it compiles Haxe to JS. But the JS it generates maps back to the Haxe very simply, and it's straightforward to debug in Chromium dev tools. There a nice declarative XML system for widget layout. It's up to you to choose how much you do declaratively, and how much in .hx code.
- revskill 3y agoNo, React with webpack/vite is simpler than "your handcrafted static site generator". I don't have to use any of Hugo, Jelkyll,..., because i can cook my own SSG toolkit right inside React.
- Alifatisk 3y agoIt's a portfolio, is js really necessary?
- lisasays 3y agoJavascript is the new Python in many shops. So while one doesn't have to know JS, it will definitely get you through a lot of doors. And not knowing it, or being too stubborn to keep your skills in it polished will keep you in the doghouse.
- bdcravens 3y agoMany of the comments suggest that of course you wouldn't use React for a blog. Someone forgot to tell these folks: https://buttercms.com/blog/how-to-create-a-blog-with-react/ https://buttercms.com/blog/how-to-create-a-blog-with-react/ https://www.sanity.io/guides/build-your-first-blog-using-react https://www.sanity.io/guides/build-your-first-blog-using-rea... (and many more) I'm firmly in the camp that React and similar frameworks are overused. However, the point is that there's a large part of our industry that is bought-in (and in many cases, built businesses around) the concept of "React all the things" and it's encouraging to see push back.
- aczerepinski 3y agoI built my simple site with just Go, no libraries of any kind. Two years later it is such a dream to never ever have any dependency chores to do. Before that I had a Phoenix site and I feel like every time I touched it (months apart) I had to update something. Not such a big deal at work where monitoring for security vulnerabilities and updating dependencies is paid work that we make time for but I hate that kind of busy work on my own time.
- WesolyKubeczek 3y agoIs it fashionable now to make a site like almost every site used to be in 2008 and wear it as a badge of honor? P. S. Needs to be even more garish. Remember the "space pigs" theme of FastTracker II? Man, those were the days.
- madeofpalk 3y agoAuthor made a two page static website without React. Okay? Congrats?
- lisasays 3y agoActually, yes. The conventional wisdom these days is to do everything in React (or something similarly bloated). Because, you know, users just love seeing a bunch of grey boxes shimmer and dance on a white background for several seconds before the magic really starts to happen. So any exercise which demonstrates that there just might be an alternative to this philosophy should be applauded.
- madeofpalk 3y agoI don’t think this is the “conventional wisdom”!
- hereforcomments 3y agoI've just joined a team recently and had a chat with the head of product. We will work on a tiny internal app, it has 3 pages: sso login page, Excel template upload page where earlier uploaded templates are shown as a card and if you click on them it opens a dashboard: a map with markers, a bar and a pie chart. This is the whole thing. This guy asked what we will use in the front-end. I said react and he was like "amazing, good job, it will be great" and the talked about we should always use react. So yes, there are places where react is used without question. Also, we will use snowflake as a backend while indexing would make everything a lot faster and the budiness logic is done by 800+ line sql (stored procedure).
- arrowsmith 3y agoIt's been the conventional wisdom at every company I've worked for in the last ~5 years, and I hate it. I ranted about this in another thread a few months ago and I stand by what I wrote: https://news.ycombinator.com/item?id=34857513 https://news.ycombinator.com/item?id=34857513
- 3y ago
- codampa01314 3y ago> My portfolio needs to be nothing more than the HTTP equivalent of a tri-fold brochure. My concern here is that your website _is_ your portfolio - including how you build it. It's not just the content and long narrative that's going to sell you. This new approach has switched from showing what you can do to telling what you can do.