21 ms·

Ask HN: What's is your go to toolset for simple front end development?

304 points by anakaine 4y ago

I'm quite firmly in back end development. Often times I find myself wanting to have a simple front end to which I can attach some new experiments for home brew coding such as Flask. I'd not mind if my front end looked a little bit nice, but don't want to spend forever learning, hand coding, and trouble shooting html, css, JavaScript. What's in your toolkit for some simple front end drag and drop style block building that gives you enough of a template to get started? I've seen the odd one posted on HN over the years, but never had the foresight to save one. Given its home lab style stuff I don't really want to dive into the likes of Webflow, Canva, etc.

he_is_legend 4y ago
https://tailwindui.com/ https://tailwindui.com/ - lots of pre-made templates using tailwind css. Some are free, but the more advanced ones require payment.
- anakaine 4y ago
  This looks pretty useful. I'll have to do a bit of digging and see how hard they are to put together.
- tbran 4y ago
  Also see DaisyUI [0], a free/open source component library for Tailwind. [0]: https://daisyui.com/ https://daisyui.com/
- ramshorst 4y ago
  This.
- favadi 4y ago
  What is the proper way to use it? Is it a collection of code snippets to copy/paste into our projects?
blackbear_ 4y ago
Being no frontend dev myself, the rare times I have to do a webpage I go for jquery and bootstrap. May sound old-fashioned, and perhaps it is, but it works.
dusted 4y ago
I just read that you didn't want to troubleshoot html, css and js, so my goto toolkit for simple UIs might not fit your bill, but hear me out :) At work, when I do internal tools, they are usually well received. They also pass just below the threshold of having their looks be judged. They're not ugly, because they're almost not there. Very plain HTML: HEAD+TITLE, H1, H2, UL, OL, A, IMG, INPUT, BR, TABLE, P Javascript as needed, usually embedded in the HEAD There is no CSS. There's simply no design to attack, no colors or alignments to disagree with. It exposes the interface to communicate with the backend, nothing more. It's also the fastest and simplest way of getting stuff done, if you don't need to expose it to "end users".
- gonzo41 4y ago
  I do this for internal science stuff at my work. The scientists love it. Simple and fast.
- vonadz 4y ago
  I recently took a similar approach for a couple of simple websites (https://abyteofcoding.com/survey/ https://abyteofcoding.com/survey/ and https://crosspromote.io https://crosspromote.io), and found that surprisingly people don't really care that much. It's still very annoying to deal with responsive stuff (changing design based on screen size) though.
  - mattlondon 4y ago
    Your site is broken for crosspromote - things are too wide for the viewport leading to things being clipped and so unreadable (at least on mobile).
    - vonadz 4y ago
      Ugh, dammit. Thanks for catching that.
      - mattlondon 4y ago
        A small bit of CSS will clean this up no problem :) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wr...
davidkuennen 4y ago
Honestly? React [0], Tailwind [1] and Vite [2]. Using Vite so setup the environment and tailwind components for css I have never been able to create front end faster than now. It feels like a super power. [0] https://reactjs.org/ https://reactjs.org/ [1] https://tailwindcss.com/ https://tailwindcss.com/ [2] https://vitejs.dev/ https://vitejs.dev/
- shantnutiwari 4y ago
  OP mentioned they are backend developers-- and you are asking them to do a whole frontend setup? Your answer is a bit like "Oh just recompile the Linux kernel if you want feature X, its so easy LOL"
  - anakaine 4y ago
    Thanks for taking charge on this one. You've stated my feelings when it comes to doing all the css, javascript and html
  - christophilus 4y ago
    It’s really not a huge hurdle. You have to install a few tools. If you’re a backend developer, this shouldn’t be too challenging. And what you get in return is: Tailwind: CSS done right, in my opinion. If you haven’t tried it, it’s amazing. It’s a no brainer if you’re not great at CSS (which a self-proclaimed backend developer would not be). React or Preact: it’s much better than cobbling together strings of HTML or using some proprietary template system. You build views with JavaScript and a teeny bit of syntactic sugar. Vite: I haven’t used, but I do use esbuild which it abstracts. It’s fast, and gets out of your way so you can bundle everything up nicely. If you add TypeScript to the mix, you now have one of the most advanced compilers in the world helping you catch your mistakes early. I know it’s popular to bash on front end folks. I’ve been writing front ends, back ends, embedded systems, and more for over 20 years. These tools legitimately solve some gnarly problems and have turned an area I previously hated (web front ends) into one I kinda sorta like (or at least don’t hate).
    - 4y ago
H8crilA 4y ago
Took me a moment to realize that frontend here means HTML+js, not the HTTP server (that is the first server that handles user's request, therefore being the frontend to everything else).
lbriner 4y ago
It depends a bit. If you want a real "micro" framework so it is super fast loading, then that will narrow down your options (I looked at purecss which is really small) but then it is likely to lack the more powerful controls you get with something like bootstrap. If you want more bells and whistles then bootstrap is fairly easy to understand, allows you to customise your js/css to only include what you are actually using but if you want the full scss experience to easily tweak parts of your design, it is all extra work to setup using gulp/webpack/visual studio code plugins or whatever.
purerandomness 4y ago
* Bootstrap 5 for CSS and customized styling: https://getbootstrap.com/ https://getbootstrap.com/ * HTMX (formerly "Intercooler") for interactive (Ajax) functionality: https://htmx.org/ https://htmx.org/
herbst 4y ago
- Bootstrap - Bootswatch - Some custom scss to pop it up - Some basic jQuery for everything dynamic Simple yet super effective
_rutinerad 4y ago
I usually just pull in fomantic ui (fork of semantic ui). It has all the components (and variants) I need, it’s easy to use and the components look much nicer than other ui frameworks.
deleted 4y ago
[deleted]
vhakulinen 4y ago
My last experiment was with bulma css and vanilla javascript (typescript) with web components for components that needed custom/complex interactions. Nice thing with this approach is that you can "just" render the web components with the backend's template engine as if those were your normal html tags. Because of typescript, a build step was required. For this I used esbuild (esbuild itself didn't do the type checking so I ran tsc with --noEmit and --watch next to it). Didn't get that far with that project to see how it works when the code base scales. I would probably pick the same setup for my next greenfield project.
eterps 4y ago
Not drag and drop style block building, but: 1. https://htmx.org https://htmx.org 2. https://simplecss.org https://simplecss.org
- rhubarbcustard 4y ago
  I prefer https://picocss.com/ https://picocss.com/. Default styling just seems nicer.
  - eterps 4y ago
    Thanks didn't know that one.
fileeditview 4y ago
Just use some simple CSS framework that you like/are used to plus maybe jquery if you need more than vanilla javascript. This will get you a looong way and you don't even need npm for it.. just copy the minimized files into your source folder.
d--b 4y ago
Not sure that's what you're looking for, but my product www.jigdev.com definitely allows you to make simple UIs to interact with backend services
ammo1662 4y ago
Really tired to find all kinds of modules for different function. So even though I had bad experience with AngularJS, I still decided to learn Angular instead of React and Vue several years ago. But if you only have some small projects, TypeScript is not better than JavaScript.
n3t 4y ago
I often use plain HTML and a classless CSS (e.g. Water.css[0]) for personal projects. This way it's easy to write and maintain. Looks okay. Fast feedback cycle during development. No need for build steps. Works in browsers without JavaScript. Works well on desktop and mobile devices. Highly recommended if suits your needs. [0]: https://watercss.kognise.dev/ https://watercss.kognise.dev/
- shantnutiwari 4y ago
  This should be the top answer. Simple Css libraries (I use MVP.css) that just work with no hassle is the way to go
- pleb_nz 4y ago
  This looks nice. Nothing wrong with this
mattront 4y ago
Take a look at Pinegrow [0] (I'm the author). It is a desktop app that lets you visually work with standard HTML & CSS files and supports frameworks such as Bootstrap, Tailwind CSS or just plain old CSS. There are also more advanced features, for example live SASS compilation, components, interactions and even exporting WordPress themes and blocks. [0] https://pinegrow.com https://pinegrow.com
- shantnutiwari 4y ago
  Tried Pinegrow(and similar UI tools), didnt like it. They expect you to still know all the low level details, at which point you might as well write straigth css
- 55555 4y ago
  Any plan to compile this to webassembly and make it run in the browser? Webflow is killing it. I had no idea there were other options. To be clear, I... don't even know why I want that? Desktop software runs faster than webapps do. But for some reason I feel like people these days simply prefer to not download stuff. Weird.
  - mattront 4y ago
    Pinegrow is a web app (mostly vanilla JS, HTML and CSS) packaged with NWJS [0] into a desktop app that runs on Mac, Windows and Linux. We also have Pinegrow Online [0] that works 100% in the browser - without webassembly. The performance is quite good for such a complex UI. [0] https://pinegrow.online/edit/ https://pinegrow.online/edit/
sydd 4y ago
React with create-react-app [0] and Netlify for deployment, github as git repo. This way you can have a hello world app that has a full CI pipeline in ~30 mins. [0] https://reactjs.org/docs/create-a-new-react-app.html#create-react-app https://reactjs.org/docs/create-a-new-react-app.html#create-...
- r_singh 4y ago
  If your domain is already on Route53, you can replace Netlify with AWS Amplify and save another 10 mins…
- butterfly771 4y ago
  And install React-Router, Redux, set TypeScript
  - plibither8 4y ago
    Redux is absolutely not a requirement for "simple" front-end dev. There are many simpler, less boilerplate-y, and more modern ways to manage state in a React application. See https://blog.logrocket.com/modern-guide-react-state-patterns/ https://blog.logrocket.com/modern-guide-react-state-patterns...
    - fendy3002 4y ago
      Even with up to medium complexities a simple useContext or React.Context is enough. And with NextJS it makes react state management very scalable and rarely need redux at all IMO.
- lucas_codes 4y ago
  Use vite instead of CRA these days!
- pavlov 4y ago
  And if you want a drag'n'drop GUI for this workflow, there's React Studio (macOS only): https://reactstudio.com https://reactstudio.com It outputs create-react-app projects with no extra runtime components or other limitations. You can deploy on Netlify or do whatever you like with the code.
wahnfrieden 4y ago
SwiftUI, HTMX
jonnycat 4y ago
If you need any kind of interactivity on the frontend, but are more comfortable with the backend, I would suggest looking at Phoenix LiveView [0] or a similar server-rendered HTML technology for your language of your choice [1]. In short, these solutions take JavaScript out of the mix entirely and basically let you deal with a single logical "app", rather than a separate frontend & backend. [0] https://github.com/phoenixframework/phoenix_live_view https://github.com/phoenixframework/phoenix_live_view [1] https://github.com/dbohdan/liveviews https://github.com/dbohdan/liveviews
- anakaine 4y ago
  A single logical app sounds great. There is great freedom and power in simplicity for small concerns.
- heeton 4y ago
  Seconding this. I've been using LiveView in production for ~18 months now, on a couple of projects. Hugely simplifies the overall stack. Combine with TailwindCSS, TailwindUI.com, and you have some very powerful tooling at a low development cost.
  - mercer 4y ago
    You or your company hiring, by any chance. I've been using that exact stack for a few years now, and Elixir+LV jobs are hard to come by :P. I probably need to focus more on 'vanilla' back- and frontend stuff, but man has it been fun so far! Definitely made me enjoy my work more.
    - atonse 4y ago
      We are betting big on moving to liveview and are hiring. We run a half dozen elixir apps in the healthcare and research sectors. people@polkadotskysoftware.com
  - worker_person 4y ago
    How stable is it? I've been screwed over twice by Angular, RXJS, etc. Every month we had to redo most of our work as the community kept deciding on new directions of correctness.
DarkCrusader2 4y ago
I use AlpineJS for reactivity. Along with JS Template literals[1], I can reach quite close to the ergonomics of having react like re-usable functional components without bringing in the whole complexity of react ecosystem. Works quite well for smallish projects. For styling I pick up Bulma CSS if I need some more complex components (tabs, modals etc.) or TailWind if I just want to pepper a little styling here and there. All this loaded directly from CDN. No build step, no server etc required. You easily do debugging from browser console. I have made a few internal tools like this which my co workers use everyday. [1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
afrnz 4y ago
I really like the ultra simple approach of MVP.css (https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/). It looks better than no styling at all and doesn't require me to get into Bootstrap. Only minimal html tags needed. Perfect for small side projects.
cgarethc 4y ago
I've written about just this subject as part of a series on my toolkit for building tiny apps. I use Material UI... React bindings for Material: https://link.medium.com/qPechTPYsrb https://link.medium.com/qPechTPYsrb
danielunited 4y ago
TailwindUI ?
- anakaine 4y ago
  Another recommended this, seems good.
yewenjie 4y ago
pnpm + Vite + Svelte + TypeScript + UnoCSS
isyouaint 4y ago
HTML + CSS + JS, if really needed
Jaruzel 4y ago
One single piece of CSS instantly improves the look of plain html pages: body {font-family:sans-serif;} Beyond that, all other CSS is optional imho. And you don't need JavaScript to trigger back-end events, as a simple <A> link will work just as nicely.
- maskros 4y ago
  No thanks, I very much prefer my serif fonts. If you prefer sans-serif for plain html pages, why don't you change the default font in your own browser instead of trying to convince everyone to force their preference onto everyone else? That way we can all have the kind of fonts we prefer... An <A> link can't do POST requests, and GET requests should be idempotent, so you'll need to use either Javascript or a form with a button to trigger back-end events.
graboid 4y ago
Preact [0] + htm [1] Why? Preact is small, fast, and reasonably easy to use. But the main selling point for me was that, together with htm, I don't need any build system a la webpack. No node_modules folder. I just have to load one script (preact + htm bundled), define my components in plain javascript files and import them. Bliss for me. [0] https://preactjs.com/ https://preactjs.com/ [1] https://github.com/developit/htm https://github.com/developit/htm Edit: Just read that you want drag & drop style UI building, so this might not be for you.
- anakaine 4y ago
  The drag and drop is more a rapid build tool than anything else. I'm, frankly, not likely to put all the love an effort in to the front end that I will the back end for small projects. No build pipeline is very helpful, actually.
  - rk06 4y ago
    if you really don't want a build pipeline, then in js land your options are limited to alpine and vue. there may be more, but these two are more popular ones
    - moochee 4y ago
      preact is great: https://gist.github.com/developit/3631edd9033df8df5975786b19f16bd8 https://gist.github.com/developit/3631edd9033df8df5975786b19...
- mattlondon 4y ago
  Ah no NPM! Vanilla JS with no build step. This is very interesting. Thanks.
  - moochee 4y ago
    See code example here: https://gist.github.com/developit/3631edd9033df8df5975786b19f16bd8 https://gist.github.com/developit/3631edd9033df8df5975786b19...
mejutoco 4y ago
htmx (https://htmx.org/ https://htmx.org/) in backend templates (flask would work) and tailwindcss (https://tailwindcss.com/ https://tailwindcss.com/) and you can get very far without touching css and Javascript. Html writing would still be needed.
viraptor 4y ago
Pyramid for backend. HTML+css for the front end. Often just bootstrap. Vuejs applied to very specific places that need to be interactive, but without any build/bundling/whatever - just referencing a single minified file.
- mythrwy 4y ago
  Seconded on these recommendations (except Pyramid which I have not used). Vuejs just applied to certain places as needed with no build/bundle/npm packages and bootstrap and that's it.
- delijati 4y ago
  i would even recommend https://deformdemo.pylonsproject.org/ https://deformdemo.pylonsproject.org/ ;) i used it for internal tools all the time
deleted 4y ago
[deleted]
idiocrat 4y ago
Wisej is just god-sent. It has all I need, and lets me focus on business logic, rather than plumbing. It is all one simple layer, no front-end/back-end.
- anakaine 4y ago
  This actually looks alright. I got burned with .Net Razor pages in a previous professional project, so am a little wary of .net based setups. The advertising material looks good tho.
- cy_hauser 4y ago
  This looks interesting for businesses but at $1,000 per year and up it's a bit too expensive for casual projects.
calltrak 4y ago
I used svelte for ( fabform . io )
ttiurani 4y ago
Sveltekit with typescript and adapter-static. Sveltekit scales down very well: if you need only CSS and HTML for some paths, that's all you write in your svelte files, and that's also all users download. At the same time if for some other paths you need more Javascript, you can just add it there, without bloating the JS bundle size. Svelte's built-in stores makes it also possible to also do very complex state management, if that's ever a need. With vite under the hood the dev experience is lightning fast.
- pc86 4y ago
  I'm not familiar with svelte[kit]; if half your files need a lot of JS, do you have to choose between manually adding it to all those files or adding it to all files including the ones that don't need it?
  - ramshorst 4y ago
    Svelte compiles so the bundle is very minimal. https://svelte.dev https://svelte.dev
jlengrand 4y ago
It's not purely drag and drop, but not complex either I personally go for lit[1] and sometimes typescript, and that's it. Typically use open-wc[2] to have a starting template under a minute. Then I use any of the front-end libraries that add bells and whistles. Vaadin coming on top [3] I'm a backender, I don't have time to, nor want to learn the specificities of a framework. And I don't want my users to have to pay the cost of many dependencies that I'm not using the full power of. Add firebase or supabase with netlify for deployment, and I'm done. [1]http://lit.dev/ http://lit.dev/ [2]https://open-wc.org/ https://open-wc.org/ [3]https://vaadin.com/docs/latest/components https://vaadin.com/docs/latest/components
topicseed 4y ago
Sveltekit
vivegi 4y ago
I started off like you on the backend development. When I had to build small webapps, I looked at the various frameworks and then settled on KnockoutJS. KnockoutJS is a very small and simple JS library. This is several years ago and at that time I didn't even know Javascript. The reason I say that is because even for a JS newbie, the KnockoutJS library was simple to use. (I read somewhere that MS Azure used KnockoutJS for their frontend dashboards in their earlier version. Not sure if they still do.) If you are comfortable with plain HTML + CSS + Javascript, adding KnockoutJS will give you a minimal app building capability that you will find useful for several usecases. You get to manage your application's data model in javascript on the client side and the UI can be bound to your datamodel (bidirectionally) without having to manage it yourself. That is more than sufficient for many usecases. If you don't want to be fiddling around with CSS too much, you can use something like Bootstrap or Material Design's CSS templates to get some decent looking UI (without getting lost in CSS minutiae). For your development workflow, start without any bundler (like WebPack or Parcel) first. Once, you have your application working, you can then introduce it as a final step.
- anakaine 4y ago
  Great advice. Thank you. What have you been doing to help with page layouts, if anything?
  - vivegi 4y ago
    I mostly use Bootstrap for prototypes. For most of my use cases, I just use card styled divs. There is basic support for different types of container divs in bootstrap. There's card-group, card-deck and even card-columns. Never had to go beyond these for my requirements. Forms are a breeze and come out looking great, right out of the box. Bootstrap has a flex (https://getbootstrap.com/docs/5.0/utilities/flex/ https://getbootstrap.com/docs/5.0/utilities/flex/) for managing layout, alignment, grid sizing etc., Also, targeting multiple form-factors and building responsive UIs is easy once you start with the mobile-first styling classes and then start setting the various breakpoints for larger device form-factors. If you already know HTML and some basic CSS, getting up to speed on Bootstrap or Material Design basics might be just a day or so. Their documentation is very good and you can go straight to the section you want (eg: tables) and try it out in your HTML.
lysecret 4y ago
I am using Retool for that. Pretty happy. It is true drag and drop. Looks decent and there has been nothing I couldn't build with it.
- cardosof 4y ago
  Cool, can you build production stuff / products or is it focused on personal projects?
  - lysecret 4y ago
    People use it for production. It is thought for internal use but you can also make it external. So we have used it for about 1.5 years for semi critical stuff. To be honest we had some reliability issue and one where actually wrong requests have been send to the DB. (They fixed it quickly but that left a scar). So I wouldn't feel comfortable using it for super critical things. But it is absolutely perfect for building MVPs.
sandreas 4y ago
sveltekit [1], orbit.js [2], JsonApiDotNet [3] and postgrest [4], additionally docker-compose, sometimes typeorm[5] + express. Good for prototyping and small home projects :-) Production readiness is questionable for the first 2 mentions... :-) [1]: https://kit.svelte.dev/ https://kit.svelte.dev/ [2]: https://orbitjs.com/ https://orbitjs.com/ [3]: https://www.jsonapi.net/ https://www.jsonapi.net/ [4]: https://postgrest.org/en/stable/ https://postgrest.org/en/stable/ [5]: https://typeorm.io/ https://typeorm.io/
anyfactor 4y ago
- Jinja templating as standalone or in Flask. - Classless minimal CSS framework to make pages pretty without using css - htmx Try to avoid doing state management. If you have to do it, use a frontend framework at that point. https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css
cies 4y ago
Elm. If there is a back-end API with a spec (GraphQL or OpenAPIv3) you can generate an Elm client for that which makes API calls type-safe and thus very robust.
- 1-more 4y ago
  Cosigned. And if the backend is yet to be written then put the whole thing on Lamdera.
  - cies 4y ago
    I'm trying to understand Lamdera, but I dont really get it. How does it persist data? Does it use WebSockets (and thus push from server)?
    - 1-more 4y ago
      I think that's exactly how it works. The whole backend model persists for every user. Your backend model is what would be your DB state in another stack.
      - cies 4y ago
        So persistence is just text files (that's what I got from scanning through the source). I'm a bit scared for what that does to state that's shared (instead of that's specific to a user). Very cool project non the less..
- m_j_g 4y ago
  secound, espeicaly together with elm street for generating code from Haskell
  - cies 4y ago
    I like to skip the backend all together and write the Elm app directly to something like Hasura (GraphQL with authorization on top of PG).
ensocode 4y ago
Does AppSmith count? It's drag and drop and has themes. Easy to use with micro services. https://www.appsmith.com/ https://www.appsmith.com/
twohaibei 4y ago
i recommend taking a boilerplate that is based on fast compiler (esbuild for example) and has tailwind set up. then add alpinejs for basic interactions. I think this stack has lowest barrier of entry for backend Devs, while having still a lot of room for growth. if you don't know tailwind, skip that part, it doesn't matter much, you can use whatever bootstrap-like library with great results.
fzumstein 4y ago
I am the developer of xlwings, so this is heavily biased. Anyhow, ever since I’ve added support for Google Sheets, I am building all internal tools with it. No HTML/JS/CSS required whatsoever and everybody knows how to interact with a spreadsheet UI. There are a few sample projects on GitHub, e.g., https://github.com/xlwings/xlwings-googlesheets-pandas-plots https://github.com/xlwings/xlwings-googlesheets-pandas-plots (they use FastAPI, but it’s trivial to adapt for Flask). On top, Google Sheets let you easily authorize the user on the backend, so you can give certain users read-only access to a database, as an example.
Raed667 4y ago
NextJS + MaterialUI + TypeScript + Vercel I use these because I know them and I don't need to look for code or docs. And I feel the the tooling doesn't get in my way. I feel that a UI components library is better suited for how I think, than a drag and drop config tool. Passing props feels simpler than digging into menus to link that JSON to that calendar.
tbran 4y ago
For those recommending Tailwind, it's huge if you're using it from the CDN (318K uncompressed). Other tools (except for Tachyons, these are maybe out of scope for a home lab): - Tachyons [0] is a small (16K-ish) utility class framework. - DaisyUI [1] is a free and open source component lib for Tailwind. - WindiCSS [2] is built on Tailwind with some additional features. - UnoCSS [3], an interesting on-demand atomic CSS engine that supports Tailwind CSS, WindiCSS, Bootstrap, and Tachyons. [0]: https://tachyons.io/ https://tachyons.io/ [1]: https://daisyui.com/ https://daisyui.com/ [2]: https://windicss.org/guide/ https://windicss.org/guide/ [3]: https://github.com/unocss/unocss https://github.com/unocss/unocss
- atonse 4y ago
  Regarding Tailwind, shouldn’t you always run postcss in production? I wondered if anyone’s working on the following: Tailwind.js running on a cloudflare worker (so it’s a “CDN”) and calculates the postcss on first request and then caches it. Wouldn’t that be the best of both worlds?
  - sanjayio 4y ago
    Yes, always purge / treeshake and then tailwind will have a significantly smaller footprint.
ohmanjjj 4y ago
AngularJS 1.8
plaguepilled 4y ago
Please look at Svelte. It achieves straightforward abstractions and great speed by not having a virtual DOM. The syntax is also very pleasant.
- sethlivingston 4y ago
  Svelte should also be considered before React/Vue/Angular, because it's a generation ahead of all of them -- in many ways. The recommendations for React in here are no bueno unless you're just looking for the framework with the most job postings.
ajoseps 4y ago
if you don't need a web application, pyqt can get you a desktop app up and running very quickly. it takes a little bit to understand the signal/slot design, but it's not too bad
toastercat 4y ago
Ignore any recommendation of React, TypeScript, Vite, or Tailwind. Here are some recommendations that don't require NPM/Node. Pick a "classless" CSS library from a site like CSSBed[1]. These are kind of like Bootstrap, except you don't need to write any CSS or apply any CSS classes in your HTML for them to work. No tooling necessary; just include a <link> tag in your HTML document. If you'd like to try something similar to this "Tailwind" hotness everyone keeps talking about, try Basscss[2]. Again, no tooling, just need a <link> tag. Once you start needing to add interactivity to your site, htmx[3] is nice and decently simple. If you really want something React-like, Mithril.js[4] is very similar but much simpler. [1] https://www.cssbed.com/ https://www.cssbed.com/ [2] https://basscss.com/ https://basscss.com/ [3] https://htmx.org/ https://htmx.org/ [4] https://mithril.js.org/ https://mithril.js.org/
- h4kor 4y ago
  https://picocss.com/ https://picocss.com/ is another option for a "classless" CSS
- hoistbypetard 4y ago
  I haven't given CSSBed or basscss a good try yet, but I do like tailwind enough to find it worth a build system. It doesn't require NPM/Node if you don't already use that; it has a standalone cli now[1]. HTMX has been a joy to work with. [1] https://tailwindcss.com/blog/standalone-cli https://tailwindcss.com/blog/standalone-cli
- tarsinge 4y ago
  While Mithril is interesting unless you are resume-building I'd avoid anything React-like until you are a small team and just go Vanilla JS with events, it can go a long way if you are a solo dev, especially if you have a backend experience and can write clear and simple code.
  - toastercat 4y ago
    Definitely agree with that. Vanilla JS has gotten very powerful in the last 10 years.
aloukissas 4y ago
Phoenix Framework
pjmlp 4y ago
Whatever JEE, Spring and ASP.NET support for SSR with components and vanilaJS.
spicyusername 4y ago
- VueJS - Tailwind - Netlify
jjdeveloper 4y ago
For drag and drop try https://devdojo.com/tails https://devdojo.com/tails
jordanmarshall 4y ago
It's hard to know exactly what you mean by "simple", but I'm fairly sure you want to avoid any frameworks, as those tend to have a learning curve, even for the easiest ones. Same goes for build tools like Webpack, which I still have trouble with after years of use. For CSS I see a lot of recommendations for "classless" libraries, which I've never tried, but could be good if you don't need to do much tinkering. For just a little bit more time investment you can get a lot more options with something like Bootstrap. It's pretty easy to learn, has a lot of "drag and drop" style components, and there are tons of templates out there (free and premium). I learned it once many years ago and have been using it for projects ever since. On the interactivity side it really depends on what your needs are, but if you don't need too many bells and whistles you could probably get by with vanilla Javascript. jQuery is also a good choice for simple applications, as it offers a slightly more intuitive interface to some of the basic JS actions. All of this being said, if you think you will be spending a lot of time on the frontend, or have complex interactivity needs, it might be worth it to learn a framework. I can recommend Vue as one that is fairly easy to get started with and also scalable to larger applications.
frays 4y ago
Back end dev here as well. Useful thread. Thanks.
hestefisk 4y ago
HTML, plain CSS, vanilla JavaScript to fetch data / interactivity when required. mod_perl / PostgreSQL on the back end. HTML::Mason for templates.
- doctor_eval 4y ago
  IMO, the problem with vanilla JS on anything other than trivial pages is you end up having to implement a bunch of common patterns (such as interpolation and form binding) and before long you’ve got what is effectively a private framework that you’ve kludged together in an ad hoc way while simultaneously trying not to be distracted from solving your actual problem. But because it’s come about in this organic, unfocussed way, it will have a bunch of bugs and caveats, and it will be a bit of a mess. And don’t even get me started on browser engine differences. Better to pick one of the lightweight frameworks (like Vue, which is super simple to integrate into plain html/css), and save yourself some pain.
  - hestefisk 4y ago
    I prefer my own mess over someone else’s mess :)
    - doctor_eval 4y ago
      I do fully agree with this normally! But Vue and a few others are so lightweight and well tested that I feel like I’m being crazy if I reimplement them. Of course YMMV, I do a lot more backend than frontend.
tdstein 4y ago
Retool https://retool.com/ https://retool.com/
gwbas1c 4y ago
> I'm quite firmly in back end development. What languages / platforms are you familiar with? For example, if you do a lot of C#, you could look at Blazor. Server-side Blazor isn't 100% simple; but if you're already doing C#, it's very easy to learn. (In-browser Blazor compilers C# to WASM, Server-side Blazor sends all mouse clicks over a websocket and gets back partial HTML updates. It (server-side) has a bit of latency, but because all state is in the server, you can keep your implementation simple.) There's also a similar thing for Java, but I can't remember the name at the moment.
- das_keyboard 4y ago
  You are probably thinking of Vaadin[1] for Java web apps. [1]https://vaadin.com/flow https://vaadin.com/flow
dbrueck 4y ago
https://svelte.dev/tutorial/basics https://svelte.dev/tutorial/basics - easy to get started with but really powerful for complex stuff too For layout, don't use any CSS framework, but instead refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ often - every time I use some big CSS framework I end up fighting it at some point. https://vitejs.dev/ https://vitejs.dev/ for packaging - I got really grumpy when frontend stuff started needing build and packaging tools, but it's the nature of things so you just have to deal with it, and vite is fast, not overly complicated, and supports fast hot reloading.
- jeanlucas 4y ago
  I don't consider Svelte a simple toolset because it can't be published statically
  - ramshorst 4y ago
    If you are in a larger scale SEO project this does blazing fast static generation with Svelte: https://github.com/Elderjs/elderjs https://github.com/Elderjs/elderjs
    - vonadz 4y ago
      Can attest to this. We used it to build https://findenergy.com https://findenergy.com which has over 15k pages and a TON of data.
  - carbadtraingood 4y ago
    I think you are incorrect here. Sveltekit comes with a number of adapters designed to ship either a SSR site or a static SPA. Serving a static Svelte site is literally a one line change in a config file. I've got a good half dozen Svelte sites that live in s3.
  - soggybutter 4y ago
    Unless I'm misunderstanding you, Svelte can absolutely be published statically. If you leverage SvelteKit and the SSR it offers, then yes you need to deploy a server, but regular Svelte builds a statically deployable bundle just like React, Vue, or any other big UI lib/framework
Tade0 4y ago
Check out: https://docs.lowdefy.com/introduction https://docs.lowdefy.com/introduction You need Node.js installed so that you have npx, but otherwise you just write your UI in yaml, because why the hell not?
- rmbyrro 4y ago
  Took a few seconds to load a purely text-based page on my browser, with several roundtrip requests. I don't think this is a good toolset in terms of simplicity...
  - Tade0 4y ago
    Development is simple. What happens next is another story altogether.
aloisdg 4y ago
Simple? vanilla html, css and js.
jeanlucas 4y ago
In a similar position, I just went with 100% static Next.js, no over complicated server rendering, just basic React
account-5 4y ago
Would Flutter be an option? You'd have to learn Dart but if you're familiar with JS its not hard to pick up. Run everywhere too, desktop, mobile, web.
rk06 4y ago
I use vuejs with create-vue for scaffolding. And then, google my way through. Vue is easier to learn and uses html, css and js. So I feel right at home. Forms are particularly easier and vue dev tools help a lot in debugging. Also, last year, I used it for an app after a break of 3+ years. I was still able to re-use a lot of prior knowledge (even if it was half forgotten). There was new syntax(comp api) and typescript introduced, but older syntax (options api) worked fine.
- BrandoElFollito 4y ago
  You may want to give Quasar a try then. It is Vue with batteries included.
revskill 4y ago
React.js is the gateway drug for you to dig into frontend development. I myself mastered it in 2 weeks as a backend engineer. There's no simple way, there's only the first step. Good luck.
- sbf501 4y ago
  > mastered it in 2 weeks as a backend engineer "mastered"
  - konha 4y ago
    Why not? React is a simple concept / library. It‘s the ecosystem around it that is complex and hard to keep up with.
    - xdennis 4y ago
      You can't be a master in the abstract. I think it's reasonable to say that a React master needs to be familiar with a great deal of the React ecosystem. Otherwise you're diluting the meaning of "master".
- bambax 4y ago
  What tutorial would you recommend to learn React fast, for someone who already knows JS well?
  - revskill 4y ago
    Read the Thinking in React.js article in reactj.org. Understand the why first before jumping right in the code.
  - ggregoire 4y ago
    The official documentation.
allenleee 4y ago
- Haskell (backend) - SwiftUI (iOS/macOS) - Rust (backend)
sbf501 4y ago
changes all the time. i like to learn new stuff so i always have a go at whatever shows up on HN. if i had to pick, i'm a fan of nuxt. spinup is quick and easy and i'm a vuejs guy so its not that hard.
mlboss 4y ago
I use Html + bootstrap + htmx + django
likortera 4y ago
I like https://tallstack.dev/ https://tallstack.dev/ a lot. But I think https://unpoly.com/ https://unpoly.com/ is nice also and works with any backend. Tailwind for CSS is great too.
deleted 4y ago
[deleted]
amne 4y ago
This thread is amazing. Every other comment mentions a new tool I've never heard of. And I thought building APIs is hard. Ignorance is bliss
- jacquesc 4y ago
  Yeah, even as a frontend dev myself... half of these I haven't heard of. Frontend dev tools desperately needs some consolidation. Everyone seems to be trying to solve the exact same problems over and over again.
  - woojoo666 4y ago
    I personally love how wild west the javascript world is. I don't think any of the tools listed in the thread are the same, so it would be hard to consolidate all of them. The only reason why there's all these different libraries is because people have different preferences, and want libraries/frameworks that fit their preferences.
BrandoElFollito 4y ago
I am in a similar situation as you (with the addition that I am an amateur dev). I use either Quasar, a Vue3 framework (vue it's very easy to learn and quasar does all the heavy lifting, plus has plenty of components), or recently Vite with Tailwind CSS (this allows you to better control the style). I would recommend to study with an empty Quasar project and build from there.
deleted 4y ago
[deleted]
rubicon33 4y ago
JavaScript, HTML, CSS, PHP.
juddlyon 4y ago
Check out shuffle.dev, they have generators and components for the most popular frameworks. A great way to learn is to create the same pages with different libraries and observe the similarities and differences.
Sevii 4y ago
I use Wordpress for drag and drop. More complex stuff Ruby on Rails with bootstrap.
laumars 4y ago
How simple are we talking about when you say "simple frontend development"? For simple personal projects I write all my own HTML and CSS from scratch. It's not particularly hard to write stuff with low to moderate interactivity from scratch and the infrequency that I do frontend dev means it's quicker to do that than learn whatever new framework has replaced the deprecated one I spent time learning a couple of years earlier (that's probably unfairly snarky but from an outsider looking in, it's hugely daunting and depressing when you see just how much churn there is). The only problem with rolling your own is that you raise the difficulty for anyone new joining the project (if it's something you plan on opening up to other contributors) and CSS can be a bit a of trial and error to get right too. However if you're just writing a few test UIs to interface with backend APIs you're POCing (which is what your question reads as) then it's probably easier to skip all the other frameworks out there and knock up something yourself.
aarreedd 4y ago
Bootstrap is 100% the answer. Pulling in everything from a CDN is the easiest route. Bootswatch is also great if you want a little more styling. (Free bootstrap themes) Bootstrap is great because it is so ubiquitous. They have page templates you can copy to get the page layout you want and then there are tons of bootstrap examples you can just copy and paste.
- dfinninger 4y ago
  Yeah, going to the Bootstrap examples, “view page source”, and seeing how the elements are put together is what made simple front-ends for internal tools so easy for me. Lots of examples and minimal pages to start from. Some team members have actually been suspicious that I was adding in React or something since if you use the right components it can look really interactive. Especially on the corporate VPN with just Flask doing a little bit of templating the latency is very low. A button redirecting to a new page is almost as fast as something all in the client side.
52-6F-62 4y ago
I've run the gamut recently trying to find one that was suitable for a project of mine—nothing crazy, just a server-rendered front end for a CMS/other data source. It was a mind-numbing exercise I wouldn't recommend. There are a lot of strong tools out there, but they're often billed as 'general-purpose' when they're most certainly not. For my project in question I ended up getting frustrated with either issues with SSR-rendered stylesheets or runtime access to browser API's and so on so I just wrote a simple server with Express that just renders static pages using EJS as a view engine. I keep my client in the same source folder, with a different config for the build that drops the artifact in the public. Since I personally like TypeScript over not using it, there was some build setup—but just `tsc` for the server code and `parcel` for the client code. There's little configuration, and I had it up and running with hot reloading of both the server and client code in no time—made me regret my decision to audit so many other options. TDLR: The client code I decided to stick with "vanilla" JS via TypeScript using parcel to build and bundle deps. The CSS is just css, but I might replace that with SASS because it can be a touch easier to organize and namespace things. FWIW, if I didn't want the TypeScript or dependency bundling (via NPM for fetching the code to host locally), it would be just JS and CSS with server-rendered HTML... if I need something fancy I have the option of plugging in a framework or something later. Starting light feels so good...
jinen83 4y ago
dronahq
lukaszkups 4y ago
Vite + Vue.js 2 + Scss
makeee 4y ago
I made http://divjoy.com http://divjoy.com, which lets you assemble blocks into a multi-page web app and then export as a React/Node codebase. Works best if you want the backend in Node, but you can swap out for your own API.
stonemetal12 4y ago
For real homebrew stuff that no one else is going to see, Flask with plain HTML. If someone else might actually see it, django and vue with one of the quickstart css things (Bootstrap, tailwind).
codingclaws 4y ago
You really want to use drag and drop as a dev? I've been a front and back-end web dev for 20 years. For front-end I almost always use vanilla CSS, vanilla JavaScript, and vanilla HTML by way of the back-end SSR template system.
infinityplus1 4y ago
Just use Bootstrap and axios library for making API requests to your REST API endpoints. You can find lots of free/paid templates and themes for Bootstrap.
5350-uiop-1130 4y ago
the irony of this thread is beautiful.
- typon 4y ago
  I don't think that's irony. Just shows you that the state of web-dev has not settled to a global minimum. Lots of local minima that different people prefer for different reasons.
ajjenkins 4y ago
Definitely agree with other answers that you should look into classless CSS frameworks. You can see a list of popular options here: https://www.designinspiration.info/classless-css-frameworks/ https://www.designinspiration.info/classless-css-frameworks/ You can get pretty far with just HTML and dropping in any one of those CSS frameworks. Since you’re using Flask, I would just make some endpoints that serve HTML using Jinja2 templates. Depending on what you’re doing, you might not need JavaScript at all. You can trigger backend stuff using HTML forms with form actions. And with a classless CSS library, the form should look nice too. If for some reason you want to keep the front end totally separate from the back end, a good framework for building web apps is Remix: https://remix.run/ https://remix.run/ . It makes it easy to build highly performant websites and has nice helpers for data loading and actions. I also like that it keeps client side JavaScript to a minimum, which keeps things simple and makes your website faster.
wdroz 4y ago
I'm doing mosly machine learning/backend. For a PoC I needed a frontend, I choose Flutter web. The tooling works great and is unlikely to change everything week like in the JS world. Dart is easy to learn and hasn't as many footguns as JS.
magicink81 4y ago
I've been using Next.js for years to deploy static sites deployed to Github pages as well as experiments. It is quite simple and keeps my code organized.
rc_mob 4y ago
i just use bootstrap and jquery. no compilation or building. they have served me well for years
juicypt 4y ago
Man, given all the comments suggesting frameworks that will require you to do html/css/js it seems like no one has really read your post. For your use case I would look at AppSmith (https://github.com/appsmithorg/appsmith https://github.com/appsmithorg/appsmith) or ToolJet (https://github.com/ToolJet/ToolJet https://github.com/ToolJet/ToolJet). These are full-stack low-code frameworks, but it's easy to use them to do just the frontend and connect to a backend API you implement yourself separately. Edit: forgot to mention that these support drag&drop for building user interfaces :)
- foxbee 4y ago
  Have you tried budibase
  - juicypt 4y ago
    That looks pretty cool, I'll have to check it out :)
- ok_dad 4y ago
  Now this is what the OP was looking for, and it so happens that I'm going to look into these too! Thanks! Quick question because I have no idea what I'm doing: is there any integration in either of those that you know of for one or more 3rd party auth system(s)? I don't want to write my own auth!
  - danuker 4y ago
    Indeed. OP should have asked for "easy" or "simple to use" because "simple" means something else entirely. Assembly language is simple.
  - juicypt 4y ago
    I'm not sure about ToolJet, but I know it's possible to use external auth systems with AppSmith. It supports at least Firebase and Supabase. I think self-hosting Supabase + AppSmith could be a good combo for quickly hashing out prototypes or internal company apps.
- 4y ago
foxbee 4y ago
Budibase is perfect for this use case. It is open source and super simple to build an app with. It's used at Apple, Google, Space X and other incredible orgs (power of open source) Budibase.com
- marc_io 4y ago
  Thanks for recommending this!
egovzz 4y ago
Check out Imba [https://imba.io/ https://imba.io/] It makes really simple to do what you're asking for.
silviogutierrez 4y ago
Since you like Python and want a turnkey React/Python integration with a Django backend, check out https://www.reactivated.io https://www.reactivated.io. It's not drag and drop, but abstracts away all tooling and let's just get to just writing your code. Either in React or in Django templates. Eventually, if you have any dynamic behavior, you're going to end up rebuilding a lot of what React does for you. Full disclosure: I'm the creator.
m4tthumphrey 4y ago
Blade (Laravel), Tailwind and, unless I need complex state management, jQuery.
015a 4y ago
May be unpopular, but: nextjs + react (+ bringing in typescript later if it starts feeling like types would be valuable). 1) React/jsx is legitimately nice for templating. Lets say I have a list of ten things I need to display; I know these things at build-time, its not dynamic like from an API or whatever. These ten things are reasonably complex; div+spans+borders+etc. React is all about components; it makes that easy, write once and copy-paste one line. There are ways to get similar behavior in plain HTML+CSS, but it tends to be leveraging web technologies that I'm not super familiar with (web components?). 2) React has an EXTREMELY good developer community. Everything you could possibly want, there's a component out there, and its an npm i away. In comparison, the more pure HTML/CSS world is more fragmented and less developed. 3) `next export`. When people think nextjs, they think SSR. Don't bother with it. Just `next export`. I leverage next for the local dev tooling, the runtime can take care of itself. 4) Or; I want server-side functionality. You can build backend-only API routes, in Next, and its actually awesome. Of course, you have to give up the static export, but its the first full stack JS "framework" where I've started thinking, this actually works & feels productive. Usually I leverage that for really simple stuff; server-side OAuth logins for hacky dashboards, things like that. For deployment: netlify is nice, or I'll use digitalocean apps if its not a static export.
- larrik 4y ago
  React is so far from "simple" it's not funny, then to throw nextjs in there too... For instance, I find vuejs to be way simpler as a non-frontend dev, and that's way overkill for what I'm interpreting the OP to want.
  - likortera 4y ago
    I like react, and next. I use it at work and it pays my bills. But I 100% agree with you, the complexity is mind blowing. And I'm pretty scared of all the upcoming server components, etc... It is a very powerful tool for sure, but it is so misused in places where it is not needed.
  - 015a 4y ago
    Well, I never used the word "simple", mostly intentionally. Except to describe next's backend API stuff, which is pretty simple (just a node server at the end of the day). Is react/next complex? Sure. Everything is far more complex than it initially seems, HTML is complex, React is even more complex if for no other reason than it builds on top of HTML. But websites are also complex. I've found that I can very quickly reach a website complexity where I feel more productive in React than bare HTML; very quickly indeed. And next is really, mostly, just nothing on top of that; its dev tooling, yeah you sometimes have to think about where the state is (server/client) and where the rendering is happen (if you use next export: its just always on the client, done). Experientially, these are small problems; and would potentially be intractable for a website that has attained the complexity to need to solve them, built on bare HTML. There are a few new techs that I want to try, to see if they can capture the simplicity of HTML, with the good parts of react. Vue is definitely one, but I've been following Astro for a bit and it also seems interesting; granting the ability to just go basic HTML, or bridge into React, Svelte, anything. [1] https://astro.build/ https://astro.build/
larrik 4y ago
Last time I did this, I bought a bootstrap template and just used django. Worked great, but you aren't gonna win friends on the internet talking about it.
y-c-o-m-b 4y ago
I've been doing this for so long that I've gained years of experience in React, Angular, and Vue. You said simple front-end development and there's nothing easier than Vue, hands down. The syntax is so easy and segregated perfectly; no JSX wild-west ugliness or fucking with a minefield of observable and subscriber pipe functions. It's easy to get started, encourages clean code, and very readable. It boggles my mind how there's so few VueJS jobs available despite the advantage. I think part of it is just developer laziness in picking up yet another library, which I totally understand. Unfortunately I'm stuck in React and Angular land 90% of the time and hate it.
- ctw 4y ago
  I’ve used React, Vue, Knockout, and just plain vanilla JS, and Vue is what I reach for now for personal projects. React is great if it’s already set up but I don’t want to waste any time with a build system for personal projects. With Vue I just add a link to a CDN, copy paste the hello world code in and I’m off to the races.
theptip 4y ago
For home-lab/internal UIs, you can go a long way with the auto-generated model-admin pages from Django. If you just need CRUD and actions triggered on a list of models, you can typically avoid any UI work and just define a few Admin classes, and if you need to make custom forms it's quite easy using Django's templating machinery to override individual pages. https://docs.djangoproject.com/en/4.0/ref/contrib/admin/ https://docs.djangoproject.com/en/4.0/ref/contrib/admin/ A similar modular admin system that's more generic is https://www.forestadmin.com/ https://www.forestadmin.com/, I think this one has a layout editor too. But that one requires a REST API and so it may require more plumbing, depending on what you've already built. Or it could fit nicely on top of what you already have, if you already have APIs for everything.
bequanna 4y ago
Check out streamlit: https://streamlit.io/ https://streamlit.io/ All Python, no need for JavaScript, css, etc. Lots of example templates.
bepero 4y ago
https://github.com/vladocar/femtoJS https://github.com/vladocar/femtoJS https://github.com/vladocar/Basic.css https://github.com/vladocar/Basic.css
andrew-dc 4y ago
+1 for Svelte/SvelteKit. Svelte's DX feels like you are just using JS, CSS, and HTML - but you get all the new hottness of the other framework packages as you need it.
mmcnl 4y ago
I always use Vue. It's simple, flexible and powerful.
metadat 4y ago
I still use Adobe Dreamweaver for basic fronted development.
kojeovo 4y ago
https://github.com/Shopify/draggable https://github.com/Shopify/draggable
imcoconut 4y ago
Not drag and drop but for a 100% python solution h2o wave is pretty cool. It has a focus on data-based dashboards but can be used to pretty easily create very good looking frontends for all sorts of applications. And you never have to leave python (whether that's a pro or a con is up for debate :)) https://wave.h2o.ai/docs/getting-started https://wave.h2o.ai/docs/getting-started
moochee 4y ago
how about: html + css + js. The interactivity part can be done through preact + htm with JSX like syntax? Don’t need tools like webpack, vite, etc.
throwaway1851 4y ago
I reach for Vue + Vuetify (a Material Design UI component library) to get things going quickly. Vue is extremely easy to learn and can be incorporated with a script tag if you prefer. Vuetify faithfully implements almost the entire Material Web Components spec, so you have everything you need to build polished, functional web apps. It’s also got very nice documentation.
yawgmoth 4y ago
Related discussion from 2021 https://news.ycombinator.com/item?id=29311761 https://news.ycombinator.com/item?id=29311761
rlawson 4y ago
htmx or unpoly
bluewalt 4y ago
Backend: Django / Celery - Front-end: TailwindCSS, daisyUI, HTMX, Hyperscript - Devops: VS Code dev containers than I can duplicate easily between projects to keep configuration.

bluehatbrit 4y ago

I'm in the same camp, I've slowly "regressed" backwards from overcomplicated SPA's back to server side rendering. When LiveView hit and I was already using Phoenix it was just perfect. It's a slight embelishment on top of multi-page server rendered pages which gives all the benefits I need and nothing more. If I _really_ need something to be driven by the frontend like a transition then I'll use Alpine.js. For CSS I tend to use tailwindcss / tailwindui because I know it well and it doens't need npm. If I didn't know tailwind I'd probably look at something like bootstrap or something I can build on top of with vanilla css.

omniscient_oce 4y ago
How do you deal with more complex/dynamic forms? As someone who learnt frontend mostly in React I've always struggled wrapping my head around how you would do that with server-side rendering. For example: 1) selecting a checkbox alters other fields in the form 2) validation that needs to hit the backend and then present warnings/errors to user 3) field arrays -> sending back a list of fields
- bluehatbrit 4y ago
  LiveView can handle that pretty well, you can setup a click or validation handler for your live view / component. It then hits the handler function on the backend and you can have the component updated in place. Since it only sends the diffs down it's pretty efficient on the round trip, at least not something to worry about compared to the hundreds of api calls most SPA's will make. So the flow is 1) click the checkbox 2) call sent across the open socket 3) backend does it's logic to figure out what it needs to do 4) backend returns the small diff of changes 5) frontend alters dom.
- mattbrewsbytes 4y ago
  Its actually recommended with Liveview for pure client side stuff (hiding form elements, etc.) to do that in the client. There are hooks to do such things. Granted I've only built admin-y tools that are pure liveview but did hear/read there are options for client side JS. Just because it can be done 100% server side doesn't mean it should be, especially if its driven out of a "look, no JS!" type of approach.

egeozcan 4y ago

I've been using htmx since the intercooler days, but I'm of the opinion that just using Next.js and treating React like simple HTML is much easier for starters. Or Alpine, but not htmx. Learning all those attributes (30, not counting the HTML headers and the JS API and the CSS classes, and events like htmx:historyCacheMissError) is not as simple as some in HN make it out to be. Just look at the most basic example in the top here: https://htmx.org/docs/ https://htmx.org/docs/. Meanwhile Alpine is read much easier, and has half the amount of attributes (15): https://alpinejs.dev/ https://alpinejs.dev/. Also look at the interactive component example from React: https://reactjs.org/tutorial/tutorial.html#making-an-interactive-component https://reactjs.org/tutorial/tutorial.html#making-an-interac.... It looks easier if you don't hate JS. Of course, I respect that some avoid JS with passion, but I don't buy that it's simpler. It's juss less javascript-y.

toastercat 4y ago
Unfortunately, "easier" does not always equal "simpler". Next.js/CRA is "easier" because it hides a lot of the complexity away from you. In my opinion, ignoring how it all works under the hood and just blindly accepting tools/clis because "it works" sets you up for confusion down the road. I've met several JS developers who don't know that JSX gets transformed to JavaScript function calls after a build step -- they just assume it's part of how browsers work at this point. And that is mindblowing to me. Most of what OP needs can probably be achieved with a few HTML files and <script> tags. It will probably be a few more keystrokes than `npx create-next-app`, but the disconnect between the code he/she is writing and the final running application will be much smaller, and I think he/she will have a better understanding of what the heck is going on. Fair point on htmx and Alpine; I have not given Alpine a shot yet, but it looks nice from the docs.
- egeozcan 4y ago
  > I've met several JS developers who don't know that JSX gets transformed to JavaScript function calls after a build step -- they just assume it's part of how browsers work at this point. And that is mindblowing to me. I believe you, and I've also met some like you described who came to our interviews indeed, but it's more like the failure of their mentors. I've also met back-end engineers, with a lot of experience, who couldn't write a simple HTTP service with C#, without using ASP.NET, nor open a simple DB connection without using EntityFramework APIs. Understanding what's going on will be even harder if it's not your main field (back-end developer just trying to get front-end out of the way) and some magic there won't cause a lot of problems IMHO.
  - zasdffaa 4y ago
    failure of their mentors? To an early point, but beyond that everyone who considers themselves a professional needs to sit down with a book or three and understand stuff. 'mentors' is a small excuse IMO.
    - egeozcan 4y ago
      I'm currently mentoring some junior devs and perhaps I was thinking about them when answering. You are absolutely correct on that.
- likortera 4y ago
  Ha! I've met web developers that didn't know that you could do form posts without a JSON API
- chatmasta 4y ago
  This is a valid criticism of SSR and the complex mental model it requires to implement effectively, even with Next.js. You need a firm understanding of the HTTP request lifecycle and the serialization boundary. For a novice programmer starting with frontend dev, I would not recommend starting with Next for this reason (create-react-app would be better). But for an experienced backend developer, the mental model of Next is no problem, and the flexibility of SSR will feel liberating. After a few weeks you might even put down the Flask! If you want to use SSR on your pages, I'd recommend sampling some Next projects (just pick one of the examples and get it running locally). You might like what you find. And for closer integration with Python, I'm sure there are options for server-side rendering of JSX that you could use, although they'll all ultimately need to either wrap a JS runtime or emulate JSX compilation in Python. So you may as well just skip the middleman and go to straight to react, whether via a framework or otherwise. If you don't want a heavy framework, or you just want basic CSR for some richer pages, you can accomplish a lot with just `react` and `esbuild`. Even SSR is just a matter of calling `ReactDOMServer.renderToPipeableStream()` and doesn't need a framework like Next. They're just nice because they take care of all the problems you'd end up solving in a robust deployment anyway.
eproxus 4y ago
As a non-js developer I found Alpine lacking. In the examples they use something like await axios get to get new content. I have no idea what any of those mean or why they have to there in that order with that syntax. HTMX makes this incredibly simple: <div hx-get="/example">Get Some HTML</div>
- egeozcan 4y ago
  What does "hx-get" do? Does it replace the HTML from that url? Why is it on a div, does it happen on load or does it wait for an event? It's a study on its own: https://htmx.org/reference/ https://htmx.org/reference/ Oh, apparently I can put hx-trigger="mouseup mousemove delay:500ms" there to make it explicit. I mean this thing has its own DSL, and IMHO, you are escaping from JS and jumping to another language, which you still have to learn and less people know of. In alpine, it's explicit. You can say fetch, then replace something in your data, and use that thing in your x-html. You still need to learn some, but in my experience, much less to keep in mind than htmx. OTOH, Next.js is even easier than Alpine to learn. You just create pages as js files and run the server. Yes, you need to run a BFF (back-end for front-end) but it's just that. The thing even updates in real-time. Only thing that can match this is Phoenix LiveView but I can't speak for it as I've just played with it and nothing more.
- horsawlarway 4y ago
  Yeah... I'm about as far to the other side of this as you can get. It really looks like the x-html attribute you're complaining about is just using plain old javascript. It takes a statement that resolves to a string, and renders that. The statement they provided happens to be pretty terrible for docs (I would have just used the built in fetch api, instead of the axios networking library - https://github.com/axios/axios https://github.com/axios/axios), but it's plain old js regardless. Your example is some custom fucking DSL that I have NO idea what it's doing. When does it run? how does it handle errors? What is the base url? What happens to the original text? How does it auth? What if I needed to post, or put, or delete? It's an entire fucking language I have to learn on top of the actual css/html/js knowledge required to understand this. In almost all cases, you're better off just learning "plain old javascript" since that skillset travels with you everywhere. basically: DO NOT MAKE ME LEARN YOUR FUCKING DSL. It's wasted time and effort for me, and learning it provides absolutely zero benefits outside of your library. Further - it will fucking leak, and then you're right back at writing plain old js again, but now you have to understand the intimate details of the library implementing the dsl to tweak the right spots. Even alpine turns me off a bit here (it's still a dsl, even if most of it reverts to plain old js) - but at least they're incredibly up front about the total time investment to learn the dsl (15 attrs, 6 props, 2 methods). HTMX is like 5 times the size (https://htmx.org/reference/ https://htmx.org/reference/), so I assume roughly 20 times the effort to learn the DSL.
meitros 4y ago
I wrote an internal tools framework on top of htmx with a desire to make things easier for backend contributors, but ran into exactly this problem - even htmx isn't quite simple. What I would have likely done next is try to create jinja abstractions around htmx

nwsm 4y ago

Ignore any recommendation telling you to blanket ignore technologies without reason

freedomben 4y ago

> Ignore any recommendation of React, TypeScript, Vite, or Tailwind. I mostly agree with the first three (with caveats about how interactive/app like you want to the result to be), but I totally disagree about Tailwind, the only exception being if all you want to do is throw up some <p>s and <hx> tags and have it look better than the default. If you're going to do much layout at all, you're gonna need CSS. If you already need CSS, Tailwind isn't much more. It's basically just css properties expressed as classes in your html. If you know the CSS already, the Tailwind equivalent is in most cases guessable. If you don't know the CSS you need yet, you'll mostly have to learn it anyway unless you can copy/paste somebody's existing layout and have it be good enough for you. And again, once you know the CSS you need, the equivalent tailwind is easy. The benefit of Tailwind is that it puts markers/boundaries over the raw CSS that are easier to reason about, and having it right in the html (IMHO) makes it a lot simpler to work with. You've mentioned in other comment: > I wrote that in reaction to the comments telling a front-end newb to start installing a bunch of NPM packages and CLI tools. I don't think OP should be "afraid" of Tailwind, but for someone new to front-end development, I would not recommend you install a CLI tool or some funky CDN script just to style your HTML. Basscss is a good alternative since it's small and ships as a single plain CSS file. I agree with what you've said, but again excepting Tailwind. A "compiled" version of TW can be used (very easily) from CDN[1] so there's no need to mess with npm or cli tools. [1]: https://tailwindcss.com/docs/installation/play-cdn https://tailwindcss.com/docs/installation/play-cdn

toastercat 4y ago
The Play CDN is the funky script I was referring to. It's not plain compiled CSS, it's a rather large (~100kb) JavaScript file that dynamically adds Tailwind classes to your document as you use them. It's also only intended for development purposes. I would recommend the CLI to OP over that, but my point was that it's largely unneeded for his use-case and more likely to cause confusion and more toolchain bloat for what are one-man homelab hobby projects.