How do you Connect your Web App with your Data?

Hey you! Front-end developer. We need a little rangeslider here in the filter options to filter the list of products, you can make that happen today - right?

"Sure thing!" you say. At least you know that you can get ANY plugin or library to integrate with your application from the beloved interwebs. So all you have to do, is search a bit, see if the component fulfills the requirements, install it. And just like a lego piece fits seamlessly into the rest of the lego landscape, the plugin just clicks right into its place.

Easy, right?

But after fiddling with the seamingly endless setup - the cruel reality strikes you

1. Where and how do you retrieve the data?
2. How do you connect that data with the plugin?
3. Does your current data API even allow that kind of filtering? Or do you have to rebuild all that logic on the clientside?
4. How do you get the UI to render after the events are fired?

The problem with these components, is that they work great in isolation. It is not their fault. They do their job perfectly as they advertise.

But whenever you start implementing a new datepicker, a new slider, a new button or a complete form, you pick a fight with what I call glue code.

It always feels like you are just only ONE tiny puzzle piece away from the solution... Just before you bump into the next roadblock.

What if there was a repeatable process to creating interactive UI? Yes.. even for your special requirements and cases.

You wouldn't have to get stuck in the first place.

You wouldn't waste countless hours roaming *shudder* Stackoverflow for hours or even days to find what is relevant to you. Bordering between giving up or distracting yourself with other features. You could finally get to the point from the start on and build web applications with confidence, knowing exactly what to do next.

Build any UI feature you can imagine with interactive guides and hands-on advice in small achievable steps.

Get your roadmap now:

Get to know the culprits

How do you ever going to know what is required to visually piece together the building blocks of your UI? You need to know your enemy. You need to know your options for the situations you will face.

Glue code by example

• Using NoUISlider as range slider to filter between two numbers

Getting to know how to deal with your information system

• How to fetch JSON anywhere anytime

These articles just barely scratch the surface of the day-to-day mundane processes required to glue your app together.

You might be able to create shiny user interfaces with well organized CSS and JavaScript you cobbled together to make the divs move. But if you only reside in your comfort zone as front-end developer, creating shiny UI but never connecting it to what fuels your website or app, you will leave it to be just a static experience. An empty hull.

Don't shy away from what seems so tough to understand and to implement. Get your free guide to persist from start to end completing the last 20% of your projects.

Get your roadmap now:

Think about it. A whole industry is dedicated to writing jQuery plugins, Angular directives or React components to make the UI feature work in your desired environment. But this alone will never help you to get the job done, when you don't know how to connect it with your data in the first place.