vojtatranta · December 20, 2016 23:13
diff --git a/php-fn.php b/php-fn.php
 // template.php
 <ul  class="posts">
  <?php foreach ($properties['posts'] as $post): ?>
    <li>
      <?= $post->title ?>
    </li>
  <?php endif; ?>
 </ul>

 // does this seem to you as crazy?!
 // it does to me, but because there are global variables somehow obtain from the air, thans wrong, right?
 // does php in html bothers you? Of course not, it is natural way!
 // now lets remove global vars by wrapping the template into a function<ul>
  
 <?php function renderPosts($properties) { ?>
  <ul class="posts">
     <?php foreach ($properties['posts'] as $post): ?>
        <li>
          <?= $post->title ?>
        </li>
      <?php endif; ?>
  </ul>
 <?php } ?>
  
 // now I can just do
 $postsHtml = renderPosts(['posts' => [new StdClass(['title' => 'Hi!'])]])
  
 // does it seem crazy? No.
 // so why for god sake it is crazy on the frontend?!
 // JavaScript is there to manipulate HTML but the most convenient part is to create it, easiest simplets
 // if just manipulating existing DOM is great idea, why don't we parse and doing replaces in the HTML on the server too?
  
 // why not do this:

  $html = "<html><head><title>Some title</title></head><body></body></html>"
  
  $htmlWithMyTitle = str_replace('Some title', 'My Title', $html)
  
  // because it is crazy and we were doing this same crazy thing on the frontned with jQuery for years:
  $('#element').innerHTML = 'This is new inner HTML'
 // and that does not work really well, there is super tight cupling between javascript and HTML state (selectors, parents, children etc.)
 // and in order to do some javascript you have to exactly know how does the HTML (static one) look like, in order to use proper selectors
 // thats crazy, that makes spaghetti mess so,
 // then we used frontend javascript templates like handlebars
 <ul>
  {{ foreach post in posts }}
  <li>{{ post.title }}</li>
  {{ endforeach }}
  </ul>
 // made things better
 // but hte problem was we had to parse text in order to get some html - templating
 // we had some global variables passed into tempalte without any control or checking for it's existence or it's origin
 // these templates had no visible API and therefore were not reusable, they could just render things, no iteraction was possible
 // it was hard to debug this "text parsed" called javascript templating enging
  
 // so the people decided not to use templating engines which are just text parsers and instead they used just javascript functions
  
 function createDom(properties) {
  return ul({ className: 'posts' },
    properties.posts.map(post => {
      return li({ className: 'post' }, post.title)
    })
  )  
 }
  
  
 // and that solved problems with templating engines - no overhead with text parsers and need for kilobytes of code just to turn text into
 // HTML
 // but there was a problem - there are coders that don't know javascript well, and this is not that much readable too, and they would be
 // scared if they seen just pure Javascript that outputs HTML
 // so they come with the JSX a quazzi syntaxt on top of Javascript that would make function calls look like HTML !!! just look like !!!
 // (explanation: JSX is not HTML you cannot use variables in HTML, JSX IS Javascript, all the feature of JS you can use there.)
  
 // so function above rewritten in the JSX (JSX would compile into function above)
 function createDom(properties) {
  return (
   <ul className="posts">
    {properties.posts.map(post => {
      return (<li> className="post">{post.title}</li>
    })}
  </ul>)
 }
  
 // AGAIN! Why dont we scream about HTML in PHP and we scream about "HTML" in Javascript (even though this is not HTML just as HTML in PHP
 // is not static HTML. Because we are not used to it, just that. - this is exaclty same principle but with some stuff life component
 // lifecycle and well defined API via props and callbacks that can be passed as arguments to the component aka. "template function"

 // clearer now? I hope so.
	// template.php
	<ul class="posts">
	<?php foreach ($properties['posts'] as $post): ?>
	<li>
	<?= $post->title ?>
	</li>
	<?php endif; ?>
	</ul>

	// does this seem to you as crazy?!
	// it does to me, but because there are global variables somehow obtain from the air, thans wrong, right?
	// does php in html bothers you? Of course not, it is natural way!
	// now lets remove global vars by wrapping the template into a function<ul>

	<?php function renderPosts($properties) { ?>
	<ul class="posts">
	<?php foreach ($properties['posts'] as $post): ?>
	<li>
	<?= $post->title ?>
	</li>
	<?php endif; ?>
	</ul>
	<?php } ?>

	// now I can just do
	$postsHtml = renderPosts(['posts' => [new StdClass(['title' => 'Hi!'])]])

	// does it seem crazy? No.
	// so why for god sake it is crazy on the frontend?!
	// JavaScript is there to manipulate HTML but the most convenient part is to create it, easiest simplets
	// if just manipulating existing DOM is great idea, why don't we parse and doing replaces in the HTML on the server too?

	// why not do this:

	$html = "<html><head><title>Some title</title></head><body></body></html>"

	$htmlWithMyTitle = str_replace('Some title', 'My Title', $html)

	// because it is crazy and we were doing this same crazy thing on the frontned with jQuery for years:
	$('#element').innerHTML = 'This is new inner HTML'
	// and that does not work really well, there is super tight cupling between javascript and HTML state (selectors, parents, children etc.)
	// and in order to do some javascript you have to exactly know how does the HTML (static one) look like, in order to use proper selectors
	// thats crazy, that makes spaghetti mess so,
	// then we used frontend javascript templates like handlebars
	<ul>
	{{ foreach post in posts }}
	<li>{{ post.title }}</li>
	{{ endforeach }}
	</ul>
	// made things better
	// but hte problem was we had to parse text in order to get some html - templating
	// we had some global variables passed into tempalte without any control or checking for it's existence or it's origin
	// these templates had no visible API and therefore were not reusable, they could just render things, no iteraction was possible
	// it was hard to debug this "text parsed" called javascript templating enging

	// so the people decided not to use templating engines which are just text parsers and instead they used just javascript functions

	function createDom(properties) {
	return ul({ className: 'posts' },
	properties.posts.map(post => {
	return li({ className: 'post' }, post.title)
	})
	)
	}


	// and that solved problems with templating engines - no overhead with text parsers and need for kilobytes of code just to turn text into
	// HTML
	// but there was a problem - there are coders that don't know javascript well, and this is not that much readable too, and they would be
	// scared if they seen just pure Javascript that outputs HTML
	// so they come with the JSX a quazzi syntaxt on top of Javascript that would make function calls look like HTML !!! just look like !!!
	// (explanation: JSX is not HTML you cannot use variables in HTML, JSX IS Javascript, all the feature of JS you can use there.)

	// so function above rewritten in the JSX (JSX would compile into function above)
	function createDom(properties) {
	return (
	<ul className="posts">
	{properties.posts.map(post => {
	return (<li> className="post">{post.title}</li>
	})}
	</ul>)
	}

	// AGAIN! Why dont we scream about HTML in PHP and we scream about "HTML" in Javascript (even though this is not HTML just as HTML in PHP
	// is not static HTML. Because we are not used to it, just that. - this is exaclty same principle but with some stuff life component
	// lifecycle and well defined API via props and callbacks that can be passed as arguments to the component aka. "template function"

	// clearer now? I hope so.