Mattias Petter Johansson mpj

## templating_problems.MD

      
              1 file
            
          
              2 forks
            
          
              44 comments
            
          
              16 stars
            
          
                mpj
                / templating_problems.MD
            
            
              Last active
              October 24, 2018 15:19
            
              
                Templating critique
              
          
    Thoughts on Templating languages

I get a lot of questions about what I think about Vue.
I won't comment too much on Vue in general because I'm not familar enough with it, but I'm very familiar with templating systems, and in articles praising Vue, the fact that it uses templating system instead of JSX is almost always cited as a reason to choose Vue. This drives me up the friggin' wall, because the negative side effects of templates are not communicated or discussed. JSX exists for good reasons. To me, JSX is a great simplification and clear improvement over templates.
Template languages are often sold on looking superficially good.
I recently ran across yet another one of these articles citing the wonders of Vue, and especially templates. In this article, this JSX example is included:


## settings.json
{
  "editor.minimap.enabled": true,
  "editor.codeLens": false,
  "editor.quickSuggestions": false,
  "editor.suggestOnTriggerCharacters": false,
  "editor.parameterHints": false
}

## lul2.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                mpj
                / lul2.md
            
            
              Created
              March 30, 2017 08:33
            
          
    Snurra

Snurra is a way of writing functions that isolates side-effects,
in order to get automated regression testing.
This is a Snurra Receiver:
let (createBus, call) = require('snurra')
const bus = createBus()
bus

  
## lul.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                mpj
                / lul.md
            
            
              Last active
              March 21, 2017 09:58
            
              
                Request pattern modeled on top of pubsub and cloud functions
              
          
    Request pattern modeled on top of pubsub and cloud functions

Below we see a message that represents an request that is "in flight" so to speak.
You can imagine that 'get-user' is a function that is responsible for fetching a user
and then sending it as the response to a http-request that is pending on a rest service.
Earlier, get-user has fetched user1 and their friends from the database, but the database response
does not contain the names of the friends, just their ids. Therefore, get-user has made a request to
decorate-user that in turn will call get-name for each user.

  
## episode.js
const assert = require('assert')

function getAnimals(fetch, id) {
  return fetch('http://api.animalfarmgame.com/animals/' + id)
    .then(response => response.json())
    .then(data => data.results[0])
}

describe('getAnimals', () => {
  it('calls fetch with the correct url', () => {

## $http.js
function £http(method, uri, body) {
  let opts = {
    mode: 'cors',
    method: method,
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'X-XSRF-TOKEN': getCookieValue('XSRF-TOKEN')
    }

## example.js
function Person(saying) {
  this.saying = saying
}

Person.prototype.talk = function() {
  console.log('I say:', this.saying)
}

function spawn(constructor) {
  var obj = {}

## rulething.html
<html>
<head>
  <style>
    .row div {
      height: 8px;
      display: inline-block;
      width: 8px;
    }
    .row div.active {
      background-color: red;

## 1-map-tree.js
function mapTree(mapper, node) {
	return {
		value: mapper(node.value),
		nodes: node.nodes
			? node.nodes.map( x => mapTree(mapper, x))
			: null
	}
}

## 1hello.md

      
              4 files
            
          
              8 forks
            
          
              4 comments
            
          
              2 stars
            
          
                mpj
                / 1hello.md
            
            
              Last active
              May 29, 2020 02:52
            
              
                Arrow functions
              
          
    This is code from an episode of Fun Fun Function:
https://youtu.be/6sQDTgOqh-I
	{
	"editor.minimap.enabled": true,
	"editor.codeLens": false,
	"editor.quickSuggestions": false,
	"editor.suggestOnTriggerCharacters": false,
	"editor.parameterHints": false
	}
	const assert = require('assert')

	function getAnimals(fetch, id) {
	return fetch('http://api.animalfarmgame.com/animals/' + id)
	.then(response => response.json())
	.then(data => data.results[0])
	}

	describe('getAnimals', () => {
	it('calls fetch with the correct url', () => {
	function £http(method, uri, body) {
	let opts = {
	mode: 'cors',
	method: method,
	credentials: 'include',
	headers: {
	'Content-Type': 'application/json',
	'Accept': 'application/json',
	'X-XSRF-TOKEN': getCookieValue('XSRF-TOKEN')
	}
	function Person(saying) {
	this.saying = saying
	}

	Person.prototype.talk = function() {
	console.log('I say:', this.saying)
	}

	function spawn(constructor) {
	var obj = {}
	<html>
	<head>
	<style>
	.row div {
	height: 8px;
	display: inline-block;
	width: 8px;
	}
	.row div.active {
	background-color: red;
	function mapTree(mapper, node) {
	return {
	value: mapper(node.value),
	nodes: node.nodes
	? node.nodes.map( x => mapTree(mapper, x))
	: null
	}
	}