Logic-less View Rules for Dummies

README-PHP.md

PHP Logic-less View Rules for Dummies

TL;DR Just use plain variable placeholder on the views.

1. No embedded expressions

No arithmetic expressions, string concatenations, function calls, etc.

Before

// profile.php 
?>
<p>
  <?= htmlspecialchars($user->firstName . ' ' . $user->lastName) ?>
</p>

After

// profile_view.php 
?>
<p><?= $fullName ?></p>

// profile.php 
$fullName = $user->firstName . ' ' . $user->lastName;
$fullName = htmlspecialchars($fullName);
include './profile_view.php';

2. No embedded logics

No if-elses, switch-cases and conditionals.

Before

// product_form.php 
?>
<h1><?= $product->id ? 'Edit' : 'Add' ?> Product</h1>

After

// product_form_view.php 
?>
<h1><?= $title ?></h1>

// product_form.php
$title = ($product->id ? 'Edit' : 'Add') . ' Product';
include './product_form_view.php';

3. No embedded loops

No for, foreach, do, while, array_map, array_filter, etc.

Before

// user_list.php 
?>
<ul>
<?php foreach ($users as $user): ?>
  <li><?= htmlspecialchars($user->name) ?></li>
<?php endforeach ?>
</ul>

After

// user_list_item.php 
?>
<li><?= $name ?></li>

// user_list_view.php 
?>
<ul><?php $user_items ?></ul>

// user_list.php
ob_start();
foreach ($users as $user) {
  $name = $user->name;
  include './user_list_item.php';
}
$user_items = ob_get_clean();
include './user_list.php';

README-REACT.md

React Logic-less View Rules for Dummies

TL;DR Just use plain variable placeholder on the views.

1. No embedded expressions

No arithmetic expressions, string concatenations, function calls, etc.

Before

// Profile.jsx
export const Profile = ({ user }) => {
  return <p>{`${user.firstName} ${user.lastName}`}</p>;
};

After

// ProfileView.jsx
export const ProfileView = ({ fullName }) => {
  return <p>{fullName}</p>;
};

// Profile.jsx
import { ProfileView } from "./ProfileView";

export const Profile = ({ user }) => {
  const fullName = `${user.firstName} ${user.lastName}`;
  return <ProfileView fullName={fullName} />;
};

2. No embedded logics

No if-elses, switch-cases and conditionals.

Before

// ProductForm.jsx
export const ProductForm = ({ product }) => {
  return <h1>{product.id ? "Edit" : "Add"} Product</h1>;
};

After

// ProductFormView.jsx
export const ProductFormView = ({ title }) => {
  return <h1>{title}</h1>;
};

// ProductForm.jsx
export const ProductForm = ({ product }) => {
  const title = `${product.id ? "Edit" : "Add"} Product`;
  return <ProductFormView title={title} />;
};

3. No embedded loops

No map, filter, etc.

Before

// UserList.jsx
export const UserList = ({ users }) => {
  return (
    <ul>
      {users.map((user) => (
        <li>{user.name}</li>
      ))}
    </ul>
  );
};

After

// UserListView.jsx
export const UserListView = ({ users }) => {
  return <ul>{users}</ul>;
};

// UserListItem.jsx
export const UserListItem = ({ name }) => {
  return <li>{name}</li>;
};

// UserList.jsx
import { UserListView } from "./UserListView";
import { UserListItem } from "./UserListItem";

export const UserList = ({ users }) => {
  const users = users.map((user) => <UserListItem name={user.name} />);
  return <UserListView users={users} />;
};

4. No embedded callbacks

Before

// Logout.jsx
export const Logout = () => {
  return (
    <button
      onClick={() => {
        logoutCurrentUser();
      }}
    >
      Logout
    </button>
  );
};

After

// LogoutView.jsx
export const LogoutView = ({ logout }) => {
  return <button onClick={logout}>Logout</button>;
};

// Logout.jsx
export const Logout = () => {
  const logout = () => {
    logoutCurrentUser();
  };
  return <LogoutView logout={logout} />;
};