TL;DR Declarative UI

Nicos Tsourektsidis
6 min readJul 1, 2020
Photo by Jack Carter

Declarative programming makes your code more concise, easier to read and reason about and reduces side effects.

Procedural and object-oriented are forms of imperative programming, which implements algorithms in explicit steps. React embraces functional programming which is a form of declarative programming.

You describe what the program must accomplish for solving a problem, rather than describing how to accomplish.

Practical tips for writing declarative code:

  • Avoid variables, try to compose functions instead
  • Avoid loops, use array methods instead
  • Avoid mutating state, create new instances instead
  • Avoid side effects, ensure your functions are pure
  • Work with the state, don’t manipulate DOM directly

Programming declarative UI is difficult. It requires to abstract DOM updates, because touching the DOM is a side-effect.

React is a declarative way of writing UIs. It gives you all the tools to write your markup in plain JavaScript functions. You care only about the application state and how this changes, when certain events occur. Then it updates the DOM for you, in an easy and predictable way.

Introduction

--

--

Nicos Tsourektsidis

Lead Software Engineer @ Epam Systems Switzerland. I ❤️ JavaScript, React, User Interfaces, coffee and video games.