YAML VS JSON: WHAT TO USE FOR YOUR STATIC DATA

By: Saurav

2019-03-22 22:17:00 UTC

When you are working with a database application where you have tables storing your data in a very readable format, you don't have to worry about writing the JSON yourself. All you need to do is use a serializer like ActiveModel Serializer or so and get your data in a JSON format. The problem arises when someone gives you a JSON data and you want to make sense of it as fast as possible.

For example, suppose you are working on a static website with a lot of sections. Each header has an image URL, image alignment, title, subtitle, a paragraph, a button, button color, and button text. Yes, for sure you can write it all in your HTML., but It would be very repetitive, will take a lot of time and cmon! why would you waste your time writing the same code again and again? We are smarter than that.

The best way would be to write a code in ruby erb which will iterate through each of the varying element and produce it for you on the screen. Keep in mind this data is not coming from an API so we would have to write it out yourself. Let's try JSON first.

I used Mockaroo to generate just three such elements. In an actual scenario, you would have to write this up yourself:

[
  {
    "id": 1,
    "image": "http://dummyimage.com/156x207.bmp/5fa2dd/ffffff",
    "align_right": false,
    "title": "Ski School",
    "sub_title": [
      {},
      {},
      {}
    ],
    "paragraph": "Proin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.",
    "button_color": "#d29801",
    "button_text": [
      {}
    ]
  },
  {
    "id": 2,
    "image": "http://dummyimage.com/143x109.jpg/dddddd/000000",
    "align_right": true,
    "title": "Heist",
    "sub_title": [
      {},
      {},
      {},
      {}
    ],
    "paragraph": "Fusce consequat. Nulla nisl. Nunc nisl.\n\nDuis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.",
    "button_color": "#559844",
    "button_text": [
      {}
    ]
  },
  {
    "id": 3,
    "image": "http://dummyimage.com/232x155.png/ff4444/ffffff",
    "align_right": false,
    "title": "Place Promised in Our Early Days, The (Kumo no mukô, yakusoku no basho)",
    "sub_title": [
      {},
      {},
      {},
      {}
    ],
    "paragraph": "Curabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est.\n\nPhasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.",
    "button_color": "#3eedc6",
    "button_text": [
      {},
      {},
      {}
    ]
  }
]

It is starting to look a little complex, isn't it? Suppose the arrays have array nested inside and there are 100s of data. It would be almost impossible to work on it without pulling your hairs out. At least it is for me. This is not so editable either. To find something in there and find out its hierarchy would take some time to get used to.
Why not try another format called YAML (If never seen, its what your weird config files are written in). Lets see how the data above looks in YAML:

---
- id: 1
  image: http://dummyimage.com/156x207.bmp/5fa2dd/ffffff
  align_right: false
  title: Ski School
  sub_title:
  - {}
  - {}
  - {}
  paragraph: Proin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius.
  button_color: "#d29801"
  button_text:
  - {}
- id: 2
  image: http://dummyimage.com/143x109.jpg/dddddd/000000
  align_right: true
  title: Heist
  sub_title:
  - {}
  - {}
  - {}
  - {}
  paragraph: |-
    Fusce consequat. Nulla nisl. Nunc nisl.Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  button_color: "#559844"
  button_text:
  - {}
- id: 3
  image: http://dummyimage.com/232x155.png/ff4444/ffffff
  align_right: false
  title: Place Promised in Our Early Days, The (Kumo no mukô, yakusoku no basho)
  sub_title:
  - {}
  - {}
  - {}
  - {}
  paragraph: |-
    Curabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est. Phasellus sit amet erat. Nulla tempus. Vivamus in felis eu sapien cursus vestibulum.
  button_color: "#3eedc6"
  button_text:
  - {}
  - {}
  - {}

E0ev07

Don't know about you but I would like working on this over complex JSON. Keep in mind though that this doesn't mean YAML is always better than JSON. For API communication, JSON is actually better. Also, JSON was not designed to support editing.

Keep in mind that JSON is a subset of YAML. That means a YAML parser can parse your YAML as well as JSON.

Anyway, getting back to our example. So how can we use it then you ask?

I am a ruby guy so will explain how to do it in Ruby:

Let's say you have a Ruby web application. It may be rails or simply a Sinatra application. Either in the controller or in the server, you use YAML.load_file to load the file in which you wanna place your YAML data. You can load the content of the file in a variable/symbol. Something like this:

require 'yaml'

# Sinatra

set :my_data, YAML.load_file('/my_file_path/my_data.yml')

#Rails Controller

@my_data =  YAML.load_file('/my_file_path/my_data.yml')

To read more about set method go here → Sinatra

And now, you can pass on that variable/symbol to your erb file and iterate through each content to build your webpage. Something like this:

# A partial file in which you have your HTML which is passed a collection (The partial will show for each item of the collection automatically)

<%= partial('/my_partial', collection: settings.my_data %>

Try it and let me know how it works out for you.

To read more about it, go follow → link Have fun coding!

Owned & Maintained by Saurav Prakash

If you like what you see, you can help me cover server costs or buy me a cup of coffee though donation :)