Need advice about which tool to choose?Ask the StackShare community!

Handlebars.js

8.2K
3.2K
+ 1
309
Vue.js

53.7K
43.1K
+ 1
1.6K
Add tool

Handlebars.js vs Vue.js: What are the differences?

Introduction

In this article, we will be discussing the key differences between Handlebars.js and Vue.js. Both are popular JavaScript libraries used for building user interfaces, but they have distinct features and characteristics that set them apart from each other.

  1. Template Syntax: Handlebars.js uses a {{mustache}} syntax for templating, where variables are enclosed within double curly braces. It allows simple expressions and partials, making the templates more readable. On the other hand, Vue.js uses an HTML-like syntax, combining HTML templates with JavaScript. This approach enables the usage of directives, filters, and computed properties, providing more flexibility in the templates.

  2. Reactivity: Vue.js offers reactive and declarative rendering, where the user interface automatically updates when the underlying data changes. It achieves this by leveraging a virtual DOM and a reactivity system that tracks dependencies and updates only the necessary components. In contrast, Handlebars.js does not have built-in reactivity, and developers have to manually update the templates when the data changes.

  3. Component-Based Architecture: Vue.js has a component-based architecture, allowing developers to create modular and reusable components. Components encapsulate their own templates, styles, and logic, making them easier to manage and maintain. However, Handlebars.js does not have native support for components, and developers have to rely on helper functions or custom approaches to achieve modularity.

  4. Size and Performance: Handlebars.js is a lightweight library with a small footprint, making it suitable for projects where size is a concern. It focuses solely on templating and does not provide additional features like reactivity or component system, which can result in better performance in some scenarios. Vue.js, on the other hand, offers a complete framework with a larger size, but it provides enhanced features out of the box, making it more suitable for complex applications.

  5. Ecosystem and Community: Vue.js has gained significant popularity over the years due to its ease of use, documentation, and a strong community, resulting in a robust and extensive ecosystem. It has a wide range of plugins, tools, and community-created components available, making development faster and more efficient. While Handlebars.js also has a decent community support, it may not offer the same level of resources and ecosystem as Vue.js.

  6. Learning Curve and Integration: Handlebars.js has a simple and intuitive syntax, which makes it easier to learn and integrate into existing projects. It has a gentle learning curve, especially for developers familiar with HTML and JavaScript. On the other hand, Vue.js may have a slightly steeper learning curve, especially for beginners, due to its additional features and concepts. However, once mastered, Vue.js offers more advanced capabilities and a seamless integration with other JavaScript libraries or existing projects.

In Summary, Handlebars.js and Vue.js differ in their template syntax, reactivity, component-based architecture, size and performance, ecosystem and community support, as well as the learning curve and integration capabilities. Choosing between the two depends on the specific requirements, complexity of the project, and familiarity with the libraries.

Advice on Handlebars.js and Vue.js
Asad Gilani
Software Engineer at Lisec Automation · | 5 upvotes · 202.3K views
Needs advice
on
Handlebars.jsHandlebars.js
and
LiquidLiquid

@All: I am searching for the best template engine for .NET. I started looking into several template engines, including the Dotliquid, Handlebars.js, Scriban, and Razorlight. I found handlebar a bit difficult to use when using the loops and condition because you need to register for helper first. DotLiquid and Scriban were easy to use and in Razorlight I did not find the example for loops.

Can you please suggest which template engine is best suited for the use of conditional/list and looping and why? Or if anybody could provide me a resource or link where I can compare which is best?

Thanks In Advance

See more
Replies (1)
Josh Lind
Recommends
on
Handlebars.jsHandlebars.js

I like Handlebars, it's very mature... some would say-- outdated.

Handlebars loops are done via {{#each myList}}. Read the docs! https://handlebarsjs.com/guide

Remember, don't put logic in your templates! Keep this layer simple. Sorry to hear you have to use dotNet.

See more
Needs advice
on
AngularJSAngularJSReactReact
and
Vue.jsVue.js

What is the best MVC stack to build mobile-friendly, light-weight, and fast single-page application with Spring Boot as back-end (Java)? Is Bootstrap still required to front-end layer these days?

The idea is to host on-premise initially with the potential to move to the cloud. Which combo would have minimal developer ramp-up time and low long-term maintenance costs (BAU support)?

See more
Replies (3)
Carolyne Stopa
Full Stack Developer at Contabilizei · | 10 upvotes · 563.6K views
Recommends
on
Vue.jsVue.js

React might be a good option if you're considering a mobile app for the future, because of react native. Although, Vue.js has the easiest learning curve and offers a better developer ramp-up time. Vue.js is great to build SPAs, very clean and organized and you won't have a lot of long-term maintenance problems (like AngularJS, for example). Bootstrap can still be used, but with flexbox there's no need anymore.

See more
Chaitanya Chunduri
Recommends
on
ReactReact

I recommend React because of less memory occupant compare to Angular, but this will depend on your organisation flexibility. When you use React you need to import different libraries as per your need. On the other side angular is a complete framework.

Performance-wise I vote for react js as it loads up quickly and lighter on the mobile. You can make good PWA with SSR as well.

See more
Recommends
on
ReactReact

If you are new to all three react will be a good choice considering, react-native will be useful if you want to build cross platform mobile application today or tomorrow. If you are talking about bootstrap styling framework than it's a choice you can style ur components by ur self or use bootstrap 4.0 framework. The complete stack mentioned above is platform agnostic u can run it anywhere you want be it cloud or on-premise.

See more
Needs advice
on
Vue.jsVue.jsMoment.jsMoment.js
and
ReactReact

Simple datepickers are cumbersome. For such a simple data input, I feel like it takes far too much effort. Ideally, the native input[type="date"] would just work like it does on FF and Chrome, but Safari and Edge don't handle it properly. So I'm left either having a diverging experience based on the browser or I need to choose a library to implement a datepicker since users aren't good at inputing formatted strings.

For React alone there are tons of examples to use https://reactjsexample.com/tag/date/. And then of course there's the bootstrap datepicker (https://bootstrap-datepicker.readthedocs.io/en/latest/), jQueryUI calendar picker, https://github.com/flatpickr/flatpickr, and many more.

How do you recommend going about handling date and time inputs? And then there's always moment.js, but I've observed some users getting stuck when presented with a blank text field. I'm curious to hear what's worked well for people...

See more
Replies (1)
Recommends
on
ReactReact

In my view, the upside of React is you're likely to find more existing, robust design systems (e.g. sets of components containing anything from buttons to datepickers) in the React ecosystem than Vue. UI frameworks aside, momentjs comes in when you want operate on the date(times) you get back from whatever datepicker you choose (e.g. date formatting, date match).

See more
Needs advice
on
ReactReact
and
Vue.jsVue.js

I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?

See more
Replies (16)
Johnny Bell
Recommends
on
ReactReact

I've used both Vue.js and React and I would stick with React. I know that Vue.js seems easier to write and its much faster to pick up however as you mentioned above React has way more ready made components you can just plugin, and the community for React is very big.

It might be a bit more of a steep learning curve for your friend to learn React over Vue.js but I think in the long run its the better option.

See more
Thomas LEVEIL
Recommends
on
Vue.jsVue.js

I chose to use Vue.js a few years ago mainly for the easy learning curve. I have no experience with React, so I won't make any comparison here. Regarding available components, I never felt locked in because of Vue when looking for components. It happens that a component I wish to use is not available as a Vue component (and nobody published any Vue wrapper for it), but in such cases I was able to quickly hack a Vue wrapper component. In the end I don't think a decision to choose one framework over another should be made solely because of the number of components available. (And not all components in either framework is maintained, bug free, documented or easy to use)

See more
Recommends
on
ReactReact

I would also go with React. The learning curve can be a little more difficult but as soon as you got the concepts it's really easy to create things. As everybody has mentioned the React community is huge and it keeps growing, anything you may need for your project there are super high probabilities that you will find it.

See more
Oguzhan Cetin
Senior Developer at Melantis · | 5 upvotes · 345.2K views
Recommends
on
ReactReact

React is great, Vue.js is also great. But I'm personally using React, because React is changing the way I look at how JavaScript should be. This is a really big plus for me. Vue is good, but it's just another alternative. Also, too many big companies are using React, that means you can trust it for big projects.

See more
Ben Shichman
Recommends
on
ReactReact

I'd have to concur that I'd advise React. In addition to the reasons mentioned, the developer pool is significantly larger (and also slightly more expensive) for React. In time, engineering costs will even out as more and more teams adopt it. The community support is fantastic, and the available components significant.

See more
Andrew Todd
Recommends
on
Vue.jsVue.js

Would start with Vue especially if you want to progress more quickly and don't want/need to spend time learning React just for the sake of it. You can always pick up React later if necessary. I would caution about using "more readily available React components" just because they exist.

See more
Recommends
on
Vue.jsVue.js
at

Both have their pro's and con's; however to agree what has been mentioned here before; Using Vue.js will be easier as it's learning curve isn't steep; plus learning Vue.js will teach you fundamentals which (in a sense) can be applied to React as well. Community support for React is indeed very big, but Vue.js is also still growing. Component wise, I wouldn't worry to much about that, writing your own components is also a good tool for learning a language.

See more
Mark Scott
Personal Development at Mark Scott · | 3 upvotes · 345.6K views
Recommends
on
Vue.jsVue.js

Having developed in both Vue.js and React, I agree with your assessment of Vue. It does feel light and easier to understand and therefore learn. Seeing that Vue has some genetic roots with React, I would say start your friend out on Vue. If they need to learn React later, that should give them a good foundation. If you have a Pluralsight subscription, look for my course on Vue.js and feel free to use the demo project as a starting point.

See more
Michael R.
Full-Stack Web Developer at STHCoders · | 3 upvotes · 344.1K views
Recommends
on
ReactReact

Anything that interacts with the Internet, websites, applications, etc., while it may be more complex to build, will be easier to maintain in the long run. React offers more flexibility, a much larger support base for knowledge and opinion, and is just as stable asVue.

To make the best comparison in my opinion, think of React as the Android OS and Vue more like iOS. While Vue may be advantageous in some cases, it is limited by constricting parameters. On the other hand, while React may be more complex and incorporate more open-source/third-party constructs, it is supported by over 50,000 npm packages and allows for the use of JSX. Which I might add, once learned, becomes second nature to employ and offers more flexibility.

See more
Recommends
on
ReactReact

It all depends. Vue.js is smaller, and from what I saw (benchmarks) faster. It's also slightly more intuitive and easier to grasp. React is more popular, and the adoption rate is much higher.

Again, it all depends.

If I may, my personal choice would perhaps be either React or Svelte.

See more
S Milliken
Recommends
on
Vue.jsVue.js

As others have stated there are more canned components available for React, but your observation about it's complexity is an important one. There are architectural aspects of Vue.js that lead to cleaner more concise solutions. As React apps get bigger they become a little unwieldy. Depending on your requirements you need to weigh those competing concerns. Our team is using React, but I am beginning to question that choice as time goes on. Another consideration is that Vue.js is becoming more mature as we speak. Also as others join the project, react developers should be productive in Vue.js within days. Just my 2 cents...

See more
Recommends
on
ReactReactVue.jsVue.js

I would recommend both of them since Vue is a UI library and helps you to design beautiful website while react allows you to handle backend problems like comment management and onspot reloading more efficiently also react includes useState and react is a framework while vue is a library

See more
Rajeev Borborah
Vice President Technology at WebMD · | 1 upvotes · 344K views
Recommends
on
Vue.jsVue.js

We did a comparison between React, Vue and Angular and while found each capable of supporting our needs, we ended up using VueJS because of its ease of use, the ability to use templates, large and growing community and good documentation. After developing on it for a around 4 months we re-evaluated and agreed that we had made the right choice and continue to migrate our products/platform to it.

See more
Recommends
on
ReactReact

It is hard to say which is good. I've used both. Vue is easier. But I feel more comfortable with React. That is why I chose React.

See more
Recommends
on
Vue.jsVue.js

VueJS hands down. Which components do you need? Have a look at Vuetify, mature project, plenty of components ready to plug and play. If on the other side you need more customization, have a look at tailwindcss. VueJS is much cleaner and IMO will overtake React soon. It's simply a better React.

See more
Recommends
on
ReactReact

Virtual dom and JSX. Vue is just a baby to the race. React has it's mobile platform version as react native . so it would be easy for you and you wont reinvent the wheel again for mobile apps.

See more
Decisions about Handlebars.js and Vue.js
Kamaleshwar BN
Senior Software Engineer at Pulley · | 10 upvotes · 617.3K views

It was easier to find people who've worked on React than Vue. Angular did not have this problem, but seemed way too bloated compared to React. Angular also brings in restrictions working within their MVC framework. React on the other hand only handles the view/rendering part and rest of the control is left to the developers. React has a very active community, support and has lots of ready-to-use plugins/libraries available.

See more
Valeriy Bykanov
Founder, CEO at X1 Group · | 4 upvotes · 404K views

Working on a new SaaS web/mobile app and ended up with React as our choice of Frontend JavaScript framework for SPA web version with React Native for iOS, Android, Windows clients.

The key takeaways:

  • Both frameworks can do the job quite well for us. This might be true for the majority of utility web apps being built out there as well, so there was no "wrong" decision here.

  • Vue is often cited as easier to learn and code on. But only in case your engineers never worked with either Vue or React and start learning them from scratch. In our case, we knew we'll be hiring engineers who already have experience in the framework we'll select - so it was not a big argument for Vue.

  • We're building our engineering team in Ukraine and realised we have 3(!) times more engineers with React experience on the market than having Vue experience.

  • Mobile - React Native, despite being a different framework, still shares a lot with React and it's just easier for React developers to start using React Native in days.

The strongest points for our decision:

  • React community is larger, means more/faster answers to your questions and existing components.

  • Way more experienced React engineers on the market.

  • React + React Native is a great combo if you're building web and mobile clients of the same app.

See more
Alex Guesnon
Full-stack software engineer · | 3 upvotes · 112.3K views
Chose
SvelteSvelte
over
Vue.jsVue.js

Svelte 3 is exacly what I'm looking for that Vue is not made for.

It has a iterable dom just like angular but very low overhead.

This is going to be used with the application.

for old/ lite devices . ie. * android tv, * micro linux, * possibly text based web browser for ascci and/or linux framebuffer * android go devices * android One devices

See more
Simon Reymann
Senior Fullstack Developer at QUANTUSflow Software GmbH · | 23 upvotes · 4.7M views

Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:

  • Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
  • Vue Styleguidist as our style guide and pool of developed Vue.js components
  • Vuetify as Material Component Framework (for fast app development)
  • TypeScript as programming language
  • Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
  • ESLint, TSLint and Prettier for coding style and code analyzes
  • Jest as testing framework
  • Google Fonts and Font Awesome for typography and icon toolkit
  • NativeScript-Vue for mobile development

The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:

  • Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
  • Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
  • Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
  • Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
  • Large scaling. Vue.js can help to develop pretty large reusable templates.
  • Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
See more
kazi shahin
CTO at Blubird Interactive Ltd. · | 3 upvotes · 100.1K views

I've an eCommerce platform building using Laravel, MySQL and jQuery. It's working good and if anyone become interested, I just deploy the entire source cod e in environment / Hosting. This is not a good model of course. Because everyone ask for small or large amount of change and I had to do this. Imagine when there will be 100 separate deploy and I had to manage 100 separate source. So How do I make my system architecture so that I'll have a core / base source code. To make any any change / update on specific deployment, it will be theme / plugin / extension based . Also if I introduce an API layer then I could handle the Web, Mobile App and POS as well ? Is the API should be part of source code or a individual single API and all the deployment will use that API ?

See more
Kyle Harrison
Web Application Developer at Fortinet · | 2 upvotes · 46.8K views

When deciding on a front end framework to build my bitcoin faucet project, I knew I needed something battle hardened, dependedable, but also feature filled and ready to go out of the box.

While I've written some smaller apps with ng2+, I've never gone full tilt with it so I knew there were still some things to learn, and most importantly: how to do them properly, such as proper component architecture and breaking old habbits from ng1.

I didn't opt for React in this case, simply due to the need to stack more and more things on top of it to do what I'd need it to do. I wanted a framework that was going to take over routing and execution of complex UI controls, and keep items outside of a component's scope updated and react to events. This framework needed a comprehensive event emission system, data acquisition and handling, bi-directional data binding, state, and a series of things that you'd need to install separately for React to match up to what's already in the box with Angular.

I opted to stick to Angular instead of Vue for the fact that Angular also already has it's entire build system ready to go and comprehensivly built to deliver the tiniest version of it's deliverable. I was hosting this thing in a google cloud instance, so I needed to make sure the app stayed as small as possible, and could automatically trim out the cruft. This is where Angular's built in Tree Shaking took precedence for me.

Vue is more than capable of handling everything I'd need, and it was something I took serious considerion of. For instance, Vue poweres Cointiply, another bitcoin faucet application that's highly reactive and high componentized just like I wanted.

But I'd still need to learn Vue, I'd still need to configure it's build system, and I still wanted to use SCSS and TypeScript.

So Angular it was. ng8 is a great platform for building very complex user interfaces, and has many of the problems you'd inevitably face integrating a user interface to an application already figured out, and complete with a best practice recommendation.

React and Vue, given enough time and energy, are super capable platforms. No one can deny that. Angular's "A-Z Batteries Included" approach to the whole development process is what made it especially enticing this time.

See more
Manuel Schoebel

When first used Angular, the documentation was horrible and also the construct of Angular super academic and hard to learn (back in 2014). When evaluating React it was way easier getting stated even though its html in js (jsx) approach was very different. After some time we really started to like the co-location and component based model. If you architect well, you will have a component completely in one file including js/html/css.

We solely focus on one technology for frontend development. The reason for that is, that offering customers excellent services we need to be up to date on all developments of the framework but also its community and vast amount of packages. Reading blogs, newsletters, podcasts and so on. You will realistically only be able to be really good at one, so thats for us: React!

See more
Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of Handlebars.js
Pros of Vue.js
  • 106
    Simple
  • 77
    Great templating language
  • 50
    Open source
  • 36
    Logicless
  • 20
    Integrates well into any codebase
  • 10
    Easy to create helper methods for complex scenarios
  • 7
    Created by Yehuda Katz
  • 2
    Easy For Fornt End Developers,learn backend
  • 1
    Awesome
  • 293
    Simple and easy to start with
  • 229
    Good documentation
  • 196
    Components
  • 131
    Simple the best
  • 100
    Simplified AngularJS
  • 94
    Reactive
  • 77
    Intuitive APIs
  • 56
    Javascript
  • 52
    Changed my front end coding life
  • 48
    Configuration is smooth
  • 37
    Easy to learn
  • 35
    So much fun to use
  • 25
    Progressive
  • 22
    Virtual dom
  • 16
    Faster than bulldogs on hot tarmac
  • 12
    Component is template, javascript and style in one
  • 12
    It's magic
  • 10
    Perfomance
  • 10
    Light Weight
  • 9
    Best of Both Worlds
  • 8
    Intuitive and easy to use
  • 8
    Elegant design
  • 8
    Application structure
  • 8
    Without misleading licenses
  • 6
    Small learning curve
  • 6
    Good command line interface
  • 5
    Logicless templates
  • 5
    Like Angular only quicker to get started with
  • 5
    Single file components
  • 5
    Easy to integrate to HTML by inline-templates
  • 4
    High performance
  • 3
    Vuex
  • 3
    Component based
  • 3
    Customer Render ending eg to HTML
  • 3
    Bridge from Web Development to JS Development
  • 2
    Concise error messages
  • 2
    Supports several template languages
  • 2
    One-way data flow
  • 2
    Lots of documentation
  • 2
    Intuitive
  • 1
    GUI

Sign up to add or upvote prosMake informed product decisions

Cons of Handlebars.js
Cons of Vue.js
    Be the first to leave a con
    • 9
      Less Common Place
    • 5
      YXMLvsHTML Markup
    • 3
      Don't support fragments
    • 3
      Only support programatically multiple root nodes

    Sign up to add or upvote consMake informed product decisions

    - No public GitHub repository available -

    What is Handlebars.js?

    Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.

    What is Vue.js?

    It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

    Need advice about which tool to choose?Ask the StackShare community!

    What companies use Handlebars.js?
    What companies use Vue.js?
    See which teams inside your own company are using Handlebars.js or Vue.js.
    Sign up for StackShare EnterpriseLearn More

    Sign up to get full access to all the companiesMake informed product decisions

    What tools integrate with Handlebars.js?
    What tools integrate with Vue.js?

    Sign up to get full access to all the tool integrationsMake informed product decisions

    Blog Posts

    JavaScriptGitHubReact+12
    5
    4121
    Vue.jsSpring BootUnity+7
    2
    1191
    What are some alternatives to Handlebars.js and Vue.js?
    AngularJS
    AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.
    Mustache
    Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object. We call it "logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.
    React
    Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
    Underscore
    A JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.
    doT.js
    It is a fastest and concise javascript template engine for Node.js and browsers. It was created in search of the fastest and concise JavaScript templating function with emphasis on performance under V8 and Node.js. It shows great performance for both Node.js and browsers.
    See all alternatives