What could be easier in front-end development?
Hey IH community 👋
I am trying to come up with ideas of a NPM package I will build over the next couple weeks. I have a couple questions for you:
- What would make front-end development easier for you?
- What do you hate about front-end development? (What do you not like to code?)
Thanks so much for your time 😄
The biggest productivity that I've seen to my frontend development has been the use of frameworks like TailwindCSS, Vue, and AlpineJS.
Tailwind -> no need to write custom CSS for 90% of your use cases. It's utility based design helps you get started really really quickly.
Vue -> complex, yet simple. Perfect for building a powerful frontend when you need a reactive app.
AlpineJS -> for places where you just need a little bit of JS magic. It's heavily inspired by Vue.
With the right toolkit, I don't hate frontend development anymore haha.
I completely agree. Tailwind has pretty much eliminated the nightmare of trying to override specificity of previously written styles. Especially when I was working at a huge company, that was a nightmare.
Vue and Alpine are also a fantastic improvement over my experience with React, which itself was a fantastic improvement over working with Backbone.
Exactly! We're using it for our new project and the speed to execution is unmatched.
We can quickly iterate on new designs as needed.
Whenever we feel like we're using the same set of classes too often, we just break them out into a reusable Vue component.
The power of a modern stack that helps enrich developer experience is beautiful.
I don't really understand the big benefit in Tailwind. I've only played with it a little and I haven't really learned it yet. I expect that's why I'm not getting it.
To me, it seems almost like writing inline styles only using class names. It also seems hard to reuse styles across multiple places without copy/pasting everywhere.
I don't really have anything against Tailwind, I just haven't figured out why it's getting big all of a sudden.
Definitely a fair point. I can address it.
You can combine classes into a group of classes to avoid repeating classes for components you reuse. E.g. buttons, cards, etc.
Or you can wrap them into frontend components using your frontend framework of choice.
With writing CSS, you repeat a lot of properties across multiple classes. Fonts. Margins. Paddings. Etc.
With tailwind, you have one utility class per possible property / value combo. So you keep your CSS files very small.
In addition, you can use something like purgecss to remove CSS that you don't need in your code!
Highly encourage watching a walkthrough by Adam Waltham on YouTube to look at practical examples and the speed to execution. It also keeps your designs clean by helping adhere to a fixed design system by forcing yourself to work within the utilities provided.
You can virtually make anything using it without ever needing to write a single CSS class yourself.
I personally say my productivity shoot way up.
Maybe because it's a step up the semantic food chain with great documentation. Benefit depends on where you are now.
What do you think of React?
I personally haven't used it myself so I can't comment on it. I know that Vue and React both have taken lots of inspirations from each other in terms of making reactive components on the frontend.
The best thing I like about Vue (and by extension AlpineJS) is that I can drop a Vue instance into any existing app and get all the benefits of Vue without having to deal with any bundler etc.
Someone else can probably speak for React. Both are great!
I see. Was thinking you had a chance to play with react too
I've been using React for a while now (have built a fully SPA), and Vue.js slightly. I kinda like them both, but react feels much easier to work with, especially now with the hooks.
I would pick Vue.js for small components over a non-SPA site, it feels faster to setup everything, especially if you're into Laravel.
AlpineJs sounds promising too, I would like to give it a try along with Svelte
Makes total sense. I'm not a fan of SPAs. I'm of the view that put as little logic on the client side as needed. Only the parts you need to make it reactive.
So Vue components in our laravel app work really well for when we need reactivity, but at the same time, we can use good ol' fashioned server side rendering for a majority of our build. It's just faster and easier to maintain.
That makes sense.
Great to know. I was thinking about learning Tailwind CSS, but now you've convinced me to 😄
https://vimeo.com/showcase/7060635/video/322129875
This video is enough to convince anyone. Tailwind is a game changer.
Depends what game you are currently playing.
This comment was deleted 6 years ago