DEV Community

Milecia
Milecia

Posted on • Updated on

What is Data Binding?

It's time for another one of those concepts that's actually pretty simple but people make it more complicated! Data binding is an important part of any web development project. It's so important in fact, that it's responsible for everything from the content you see on your screen to the updates made in your database. That's why it's time to learn exactly what data binding is.

Data binding makes the link between the user and the data source, which is usually a database. When you submit a form on a website, the data binding is what sends your information to database. For example, when you need to reset your password on a site, you submit a form with your email address. That does some kind of call to the database to get your user info and then you are taken to a page with another form for you to enter your new password which will update the database.

It looks something like this:

data binding

That's really all data binding is. It connects the front-end of your website to the back-end server. There are some huge advantages to using data binding. It possible for real time updates to pages based on how users interact with them. Another great thing about data binding is that it reduces the amount of code you have to write by getting rid of the need to find elements and manually get their values.

You'll probably see a boost in performance too. That's because your code is streamlined to use information in the database. You won't need to make as many database calls which saves you a crap ton of time.

One last thing I want to mention is that data binding doesn't have to involve a database. Your data source could also be an array or a collection depending on what framework you are using.

Hopefully this has helped you make more sense of what data binding is and how it works. Do you have any stories about data binding or any questions? I'd love to hear from you in the comments.


Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding

Top comments (1)

Collapse
 
necolanch profile image
Nicholas Cruz

Great explanation thanks for this.