Yuriy Voziy "Fantastic Template Strings and Where to Use Them"

www.luxoft.com
Fantastic Template Stings
Yuriy Voziy
and Where to Use Them

www.luxoft.com
ES5 Style
const name = 'Yuriy Voziy';
const city = 'Kyiv';
const birth = 1984;
const greeting = '<html>' + "n"
+ '<body>' + "n"
+ '<div>' + "n"
+ 'Hi, my name is ' + name + ".n"
+ 'I live in ' + _.upperFirst(city) + ".n"
+ _.upperFirst(city) + " is a beatiful place!n"
+ "</div></body></html>";

www.luxoft.com
With ES6 Template Strings
const name = 'Yuriy Voziy';
const city = 'Kyiv';
const birth = 1984;
const greeting = `<html>
<body>
<div>
Hi, my name is ${name}.
I am ${new Date().getFullYear() - birth} years old.
I live in ${_.upperFirst(city)}.
And I must say that ${_.upperFirst(city)} is a beautiful place!
</div>
</body>
</html>`

www.luxoft.com
Let’s write a simple log function
function log(strings) {
console.log(string[0]);
}
log `Entering log data`
// Prints "Entering log data"

www.luxoft.com
Let’s make it look nice
const log = ([strings]) => console.log(string);
// Prints "Entering log data"
That’s better

www.luxoft.com
What about variables?
const log = ([string]) => console.log(string);
// Prints "Entering log data“
log `Entered variable: ${1}`
// Prints "Entered variable: "
//Fix
const log = ([string], data) => console.log(string, data);
log `Entered variable: ${1}`
// Prints "Entered variable: 1"
Що трапилось?
Всі змінні передаються у шаблонну
функцію, як аргументи.
Зазвичай нам потрібно зробити
щось більше, ніж надрукувати всі
строки разом.

www.luxoft.com
Let’s make it universal
const log = (strings, ...values) =>
console.log(strings.reduce(
(str, value, index) => str += value + (values[index] || '')
, ''))
log `Welcome to ${new Date().getFullYear()}
Your local date is: ${new Date}`
//Welcome to 2018
//Your local date is: Mon Dec 03 2018 20:45:59 GMT+0200 (Eastern European Standard Time)

www.luxoft.com
Use it as i18n
// default
i18n `Hello ${'World'}`
// "Hello World"
// we switch to German
i18n.locale = 'de';
// but we still write in English
i18n`Hello ${'World'}`
// "Hallo World"
i18n.locale = 'it';
// Ciao World
i18n.locale = 'sp';
// Hola World
https://codeburst.io/easy-i18n-in-10-lines-of-javascript-poc-eb9e5444d71e

www.luxoft.com
Use it for a SQL queries
const SQL = require('sql-template-strings')
const book = 'harry potter'
const author = 'J. K. Rowling'
// sequelize:
sequelize.query('SELECT author FROM books WHERE name = ? AND author = ?', {replacements: [book, author]})
// is equivalent to
sequelize.query(SQL `SELECT author FROM books WHERE name = ${book} AND author = ${author}`)
https://github.com/felixfbecker/node-sql-template-strings

www.luxoft.com
Or slightly modify to be more advanced
//If we slightly modify this
const SQL = require('sql-query')
const Sequelize = require('sequelize')
SQL.db = new Sequelize('mysql://user:pass@example.com:9821/db_name')
const results = await SQL `SELECT author FROM books WHERE name = ${book} AND author = ${author}` ()
https://github.com/felixfbecker/node-sql-template-strings

www.luxoft.com
Create a shorthand for your configs
function _get([key], object) {
if (object) {
return _.get(object, key);
}
return (object, defValue) => _.get(object, key, defValue);
}
let config = {
author: 'Yuriy Voziy',
company: {
name: 'Luxoft',
url: 'https://career.luxoft.com',
office: {
rad: {
name: 'Irva',
address: 'Rad 1014'
}
}
}
}
_get `company.office.rad.name` (config, 'Dafault') //Irva
_get `company.of_fice.rad.name` (config) || 'Default' //Default
_get `company.office.rad.name${config}`; // Irva

www.luxoft.com
Use a shorthand for your nested JSONs
function _get([key], object) {
if (object) {
return _.get(object, key);
}
return (object, defValue) => _.get(object, key, defValue);
}
let config = {
company: {
name: 'Luxoft',
url: 'https://career.luxoft.com',
office: {
rad: {
name: 'Irva',
address: 'Rad 1014'
}
}
}
}
_get `company.office.rad.name` (config, 'Dafault') //Irva
_get `company.of_fice.rad.name` (config) || 'Default' //Default
_get `company.office.rad.name${config}`; // Irva

www.luxoft.com
Or create a wrapper for the configs
let config = {
company: {
name: 'Luxoft',
url: 'https://career.luxoft.com'
}
}
_get.wrap = function (object) {
return ([key], keyv) => _.get(object, key || keyv);
}
_config = _get.wrap(config);
log `${ _config `company.name` }` //Luxoft
log `${ _config `company.url` }` //https://career.Luxoft.com

www.luxoft.com
Fetching urls
_fetch = ([url], urlv) => fetch(url || urlv);
//This is just to make
_fetch `http://www.mocky.io/v2/5c058daf3300005f01e812e0`
//and
_fetch `${_config `site.url`}`
//and
fetch (_config `site.url`)
//Work the same

www.luxoft.com
But it returns Promise inside a Promise
//But this returns promise inside promise ☹
Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Response
body: ReadableStream
locked: false
__proto__: Object
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://www.mocky.io/v2/5c058daf3300005f01e812e0"
__proto__: Response

www.luxoft.com
So let’s make comfort of this
//Most of the times we want data, so let's wait for it
_fetch = ([url], ...[urlv]) => new Promise((resolve, reject) =>
fetch(url || urlv).then((response) => resolve(response.json())).catch(reject)
);
await _fetch `http://www.mocky.io/v2/5c058daf3300005f01e812e0` //{hello: {my: 'world’}}
await _fetch `${ _config `site.url` }` //{hello: {my: 'world'}}
//Still no HEAD, POST, PUT, DELETE and other header though…

www.luxoft.com
And add some comfort and possibilities
_fetch = ([url, urlb], ...[urlv, options]) => new Promise((resolve, reject) =>
fetch(url || urlb || urlv, typeof urlv == 'string' ? options : urlv)
.then((response) => resolve(response.json()))
.catch(reject));
_fetch.options = ([url], ...[urlv]) => ([], ...[options]) =>
_fetch `${url || urlv}${options}`;
const options = {method: 'post'}
const resp = _fetch `http://www.mocky.io/v2/5c058daf3300005f01e812e0`
.then(console.log)
.catch(console.error)
const resp = await _fetch `http://www.mocky.io/v2/5c058daf3300005f01e812e0 ${options}`
const resp = await _fetch `${options} http://www.mocky.io/v2/5c058daf3300005f01e812e0`
const resp = await _fetch.options(options) `http://www.mocky.io/v2/5c058daf3300005f01e812e0`
log `${ _get `my.deep.value` `${await _fetch(options) `http://www.mocky.io/v2/5c058daf3300005f01e812e0`}`}`
log `${ _get `my.deep.value` (resp)}`

www.luxoft.com
Dependency injection
require = require('req')
const {log, i18n, _get, _fetch} = require ùtils`
const Sequelize = require `sequelize`
const {dependency, inject, dependencies} = require `di`
const lodash = require `lodash`
const _config = _get.wrap(require `config`)
dependency `db` (new Sequelize( _config `db.string `))
dependency `sql` (require `sql-query`)
dependency `log ${log}`
dependency `fetch` (require `node-fetch`)
dependency `_ ${lodash}`
const {log, SQL, _fetch} = dependencies('log', 'sql', '_fetch')
const resp = await _fetch `${ _config `site.url` } ${ _config `site.options` }`
SQL ÌNSERT INTO myvalues (${ _get `my.deep.value` (resp) }, ${ _get `hello` (resp)} )` ()
.then( (v) => inject `log` `${ i18n `Successfully inserted record: ${v}` }`)
.catch(console.error.bind(null, i18n Èrror inserting value: `, v))

www.luxoft.com
Дякую
yvoziy@luxoft.com

Yuriy Voziy "Fantastic Template Strings and Where to Use Them"

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Yuriy Voziy "Fantastic Template Strings and Where to Use Them"

Similar to Yuriy Voziy "Fantastic Template Strings and Where to Use Them" (20)

More from LogeekNightUkraine

More from LogeekNightUkraine (20)

Recently uploaded

Recently uploaded (20)

Yuriy Voziy "Fantastic Template Strings and Where to Use Them"