{"id":3128,"date":"2015-04-10T12:15:24","date_gmt":"2015-04-10T09:15:24","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=3128"},"modified":"2015-04-06T03:38:49","modified_gmt":"2015-04-06T00:38:49","slug":"declarative-beats-imperative-transforming-data-javascript","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/declarative-beats-imperative-transforming-data-javascript\/","title":{"rendered":"Declarative Beats Imperative: Transforming Data In JavaScript"},"content":{"rendered":"

The product I am working on is a fairly typical web application, based on React.js and Node.js. Its main task is to fetch data from different REST-ish services, combine them, and present them in an attractive manner to users.<\/p>\n

This data extraction and transformation \u2013 keeping only the items and properties we care about and structuring them in a way well aligned with the needs of the UI \u2013 is thus crucial. I would like to share our journey from an imperative implementation of this process to a much more reader-friendly declarative one.<\/p>\n

For example, here is some JSON data we get back from a REST service:<\/p>\n

[{\r\n    productId: '42',\r\n    type: 'TEAPOT',\r\n    subProducts: [{\r\n        productNumber: 'ch132',\r\n        name: 'Kyusu Teapot',\r\n        dealerDetails: [\r\n          { dealerGroup: 'webshop', rank: 1 }\r\n        ]}]}];<\/pre>\n
And here is what we would like to transform it into:<\/p>\n
{\r\n  '42': {\r\n    'productId': '42',\r\n    'variations': {\r\n      'ch132': {\r\n        'productNumber': 'ch132',\r\n        'name': 'Kyusu Teapot',\r\n      }\r\n    },\r\n    'selectedSubProductId': 'ch132'\r\n  }}<\/pre>\n
My first implementation was functional, using the wonderful functional library lodash<\/a>, but rather imperative. We had a series of functions that transformed some vague JavaScript object \/ JSON into something else. It looked something like this:<\/p>\n
_.chain(data)\r\n\t.groupBy('productId')\r\n\t.mapValues(_.flow(_.first, transformProduct))\r\n\t.value();\r\n\r\nfunction transformProduct(product) {\r\n    return {\r\n        productId: product.productId,\r\n        variations: _.chain(product.subProducts)\r\n            .groupBy('productNumber')\r\n            .mapValues(_.flow(_.first, transformSubProduct)) \/\/ transformSubProduct not shown\r\n            .value();\r\n    };\r\n}\r\n\/\/ + more stuff left out<\/pre>\n
The problem was that it was difficult to see the structure of both the input data and transformed output data.\u00a0Without a good knowledge of the structure of the data being processed and the desired outcome, it was difficult to understand the code. It was also difficult to add additional processing, such as the generation of a \u201ctransformation audit log,\u201d to the process.<\/p>\n
Then a smart colleague of mine, Alex York, did a part of the transformation in a nice, declarative way. Inspired, I reimplemented the whole thing to be much more declarative. The core is a nested data structure resembling closely the desired output data with the addition of processing instructions. Here is a simplified example:<\/p>\n
var productCatalogTransformationDefinition = {\r\n    type: 'map',\r\n    singleGroupBy: 'productId',\r\n    elementValue: {\r\n        productId: 'productId',\r\n        variations: {\r\n            selector: 'subProducts',\r\n            singleGroupBy: 'productNumber',\r\n            elementValue: {\r\n                productNumber: 'productNumber',\r\n                name: 'name',\r\n                images: {\r\n                    selector: 'additionalDetailsList',\r\n                    filter: function(it) { return it.name.search(\/^IMAGE\\d+$\/) === 0; },\r\n                    elementValue: 'value'\r\n                }\r\n            }\r\n        }\r\n\/\/ + function transform(rawData, transformationDefinition) - see\r\n\/\/   the source code linked below<\/pre>\n
As you can see, each output value is specified by an object that defines what operations (based on lodash) to perform on the current \u201csourceElement\u201d to produce it. It is our\u00a0transformer<\/code> module which uses this \u201ctransformDefinition\u201d along with the JSON input data (typically from a REST service) which performs the task of turning the input data into the desired output data structure.<\/p>\n
Pros & Cons<\/h2>\n
Pros:<\/p>\n