Evolution of the PHP Language

PHP is a language for the web, the most popular one in fact.  That’s not to say it’s the best, or the worst for that matter but the number of webpages powered by PHP outweighs all the other languages including JAVA, python, Ruby on Rails, etc.

On the heels of the launch of PHP 7, I thought it would be interesting to see the evolution of PHP.  The focus here is mostly on the evolution of PHP starting with PHP 5.0 which was released almost a decade ago.  Objects were introduced in Version 4, but PHP didn’t really become a more modern object oriented language until version 5.  It’s when the language really started to grow up.

Let’s take a look at what each version of 5 brought us.

PHP 5.0

Version 5 continues the move toward object oriented programming

New Features

  • Zend Engine 2, which greatly improved PHP’s performance
  • MySQLi, or improved MySQL, was introduced
  • SQLite is now built into PHP

For more information check out, http://php.net/manual/en/migration5.incompatible.php

PHP 5.1

New Features and Improvements

  • Support for custom autoloading was eventually a game changer for PHP framework creators
    • spl_autoload_register in PHP 5.1.2
  • A complete rewrite of date handling code, with improved timezone support.
  • Significant performance improvements compared to PHP 5.0.X.
  • PDO extension is now enabled by default.
  • Over 30 new functions in various extensions and built-in functionality.
  • Over 400 various bug fixes

For more information check out, http://php.net/manual/en/migration51.changes.php

PHP 5.2

New Features

  • Improved memory manager and increased default memory limit. The new memory manager allocates less memory and works faster than the previous incarnation.
  • New Extensions (The following are new extensions added (by default) as of PHP 5.2.0)
    • Filter – validates and filters data, and is designed for use with insecure data such as user input. This extension is enabled by default; the default mode RAW does not impact input data in any way.
    • JSON – implements the JavaScript Object Notation (JSON) data interchange format. This extension is enabled by default.
    • Zip – enables you to transparently read or write ZIP compressed archives and the files inside them.

PHP 5.3

One of the most important updates to PHP that I can think of.  Don’t be surprised if you come across a site that is still running version 5.3 (however this is not recommended 😉

New Features

  • Support for namespaces has been added
  • Support for Late Static Bindings has been added
  • Support for jump labels (limited goto) has been added.
  • Support for native Closures (Lambda/Anonymous functions) has been added.
  • There are two new magic methods, __callStatic() and __invoke().
  • Nowdoc syntax is now supported, similar to Heredoc syntax, but with single quotes.
  • It is now possible to use Heredocs to initialize static variables and class properties/constants.
  • Heredocs may now be declared using double quotes, complementing the Nowdoc syntax.
  • Constants can now be declared outside a class using the const keyword.
  • The ternary operator now has a shorthand form: ?:.
  • The HTTP stream wrapper now considers all status codes from 200 to 399 to be successful.
  • Dynamic access to static methods is now possible

For more information check out, http://php.net/manual/en/migration53.new-features.php

PHP 5.4

Traits and built in development web server are really cool.  Although they have been here since 5.4 some folks are just now using them.

New Features

  • Support for traits has been added.
  • Short array syntax has been added, e.g. $a = [1, 2, 3, 4]; or $a = [‘one’ => 1, ‘two’ => 2, ‘three’ => 3, ‘four’ => 4];.
  • Function array dereferencing has been added, e.g. foo()[0].
  • Closures now support $this.
  • <?= is now always available, regardless of the short_open_tag php.ini option.
  • Class member access on instantiation has been added, e.g. (new Foo)->bar().
  • Class::{expr}() syntax is now supported.
  • Binary number format has been added, e.g. 0b001001101.
  • Improved parse error messages and improved incompatible arguments warnings.
  • The session extension can now track the upload progress of files.
  • Built-in development web server in CLI mode.

the <?= tag has been a contentios item in some code bases, especially with larger teams, it’s great that it is always available now.  It’s cleaner and easier to write than <?php echo

For more information check out, http://php.net/manual/en/migration54.new-features.php

The page on traits is worth a read too, http://php.net/manual/en/language.oop5.traits.php

PHP 5.5

New Features

  • finally keyword added
  • password_hash()
  • foreach now supports list()
  • empty() supports arbitrary expressions
  • array and string literal dereferencing
  • Generators added

For more information check out, http://php.net/manual/en/migration55.new-features.php

To learn more about Generators read, http://php.net/manual/en/language.generators.overview.php

PHP 5.6

New Features

  • Constant expressions
  • Variadic functions can now be implemented using the … operator, instead of relying on func_get_args().
  • Arrays and Traversable objects can be unpacked into argument lists when calling functions by using the … operator. This is also known as the splat operator in other languages, including Ruby.
  • A right associative ** operator has been added to support exponentiation, along with a **= shorthand assignment operator.
  • use function and use const
    • The use operator has been extended to support importing functions and constants in addition to classes. This is achieved via the use function and use const constructs, respectively.
  • phpdbg – PHP now includes an interactive debugger called phpdbg implemented as a SAPI module.
  • Default character encoding
  • php://input is reusable
  • Files larger than 2 gigabytes in size are now accepted.
  • GMP supports operator overloading
  • hash_equals() for timing attack safe string comparison
  • The __debugInfo() magic method has been added to allow objects to change the properties and values that are shown when the object is output using var_dump().
  • gost-crypto hash algorithm
  • SSL/TLS improvements
  • pgsql async support

For more information check out, http://php.net/manual/en/migration56.new-features.php

PHP 6?

PHP 6 was a false start and development was eventually abandoned in favor of V7.  I never used it but from the sound of it I didn’t miss much.

If for some reason you are using PHP 6, upgrade to 7 ASAP!

PHP 7

As mentioned earlier, PHP 7 is huge step forward.  Type declarations will make code less error prone and the the 2x speed improvement will speed up your site.

New Features

  • Scalar type declarations
    • Scalar type declarations come in two flavours: coercive (default) and strict. The following types for parameters can now be enforced (either coercively or strictly): strings (string), integers (int), floating-point numbers (float), and booleans (bool). They augment the other types introduced in PHP 5: class names, interfaces, array and callable.
  • Return type declarations
  • Null coalescing operator
  • The null coalescing operator (??) has been added as syntactic sugar for the common case of needing to use a ternary in conjunction withisset(). It returns its first operand if it exists and is not NULL; otherwise it returns its second operand.
  • Spaceship operator (<=>)
  • Constant arrays using define()
  • Anonymous classes
  • Closure::call()
  • Filtered unserialize()
  • Expectations
  • Group use declarations
  • Generator Return Expressions
  • Generator delegation
  • Session options
  • preg_replace_callback_array()
  • CSPRNG Functions
  • list() can always unpack objects implementing ArrayAccess

For more information check out, http://php.net/manual/en/migration70.new-features.php

Other useful PHP7 links

Bonus Points

Do you remember what PHP stood for originally?

Understanding AngularJS 2 vs AngularJS 1: Part 2

Components instead of Controllers

While Components have been around in some shape or form around the web, Angular 2 is based around these amazingly flexible elements.

Components in AngularJS 2 will entirely replace controllers. In fact, they will also replace the concept of a module. They look like a directive, but actually act like a controller.

A component is essentially an HTML element that uses Shadow DOM to encapsulate its own scope and behavior. What this really means: your component has its own variable scope. What happens in your component, stays in your component. You can however inject your components into other components or decorate them to add functionality.

Here is an example of the previous burrito example above implemented in AngularJS 2 showing a component in action:

Decorators via Annotations

Decorators are a simple design pattern that we can now use to update the values and context of a component without introducing new behavior.

Seriously, this is great. You can just apply a decorator to your directive and change its variable values without actually tearing into its guts. Change your components color from ‘Red’ to ‘Blue’ at runtime externally without hacking away at its internal functionality or exposing some getter after the fact.

Currently, this is available in the upis provided by TypeScript, but is

A Focus on Dependency Injection

AngularJS 1.x certainly used the concept of dependency injection and promoted it with the usage of services and factories. I don’t think I need to spend a lot of time stumping why and how this can make for better encapsulation and easier re-use of code.

AngularJS 2 will take this a step further and encourage you to use dependency injection with components. Write a login component and inject it into

Zones.js

Previously, we needed to let the Digest / Apply loop cycle through your variables, or use the oft-maligned scope.$apply to let your app know that something changed. ZoneJS will now be handling all of this.

Zones is able to encapsulate the entire scope of your component and is aware of when asynchronous events start and stop.

While getting away from $apply and not having to worry about your scope is great, here comes the best part: ZonesJS will speed up execution time as much as 5x compared to AngularJS 1.x code.

Here is a great talk about Zones by Brian Ford given at the 2015 ng-conf.

The bad news: Zones is only available for modern evergreen browsers. This means if you are using IE10 or below you will not get the to use this amazing toolset. Angular 2 will have fallbacks with dirty value checking and poly-fills to make sure this is all invisible for you, but you will not see the major speed increase you would get from actually using ZonesJS.

TypeScript

TypeScript is a superset of ES6 and gives us some amazing features.

AngularJS 2 will be written in TypeScript, but this doesn’t mean you have to use it. I can say that I plan on using it as I think this will be an area

Ok, this sounds great. How do I prepare to upgrade?

I won’t go too much in depth on this but there will be upgrade paths and plans if you dont want to just ‘start over’ with your existing angular app.

The Official AngularJS 1.x to 2 Upgrade Strategy Doc offers some insight on how to upgrade.

Headless WordPress (A Primer)

What is headless

There are many great open source software packages out there.  Some of the most popular are WordPress, Drupal and Magento.  It has been gaining popularity in recent years to run these apps as headless.  But what does that mean?

Running headless means to use the admin and data collected in an app but use something else to render the front-end.  For instance you could manage all of your content in the wordpress admin but site that the end user sees is rendered in some other technology all together.

At the end of the day the websites that we visit are all HTML, CSS and JavaScript.  Behind the scenes the story get more complex.  Since all your data has been crafted in wordpress you can pull this content out and render it in your favorite

Who is it for?

So why would I decapitate my WordPress site?

Let me start by who it is not for.  If you are using wordPress and have no problems with how your site currently acts or functions than headless is not for you.

If you run a WordPress site but are having issues with scaling, security, and customizations than it is definitely something you should take a look at.  Keep reading 🙂

 

Why headless WordPress

Advantages
There are many advantages to using an app (CMS) like WordPress headless.  To start it allows you take full control of your front-end.   More importantly it allows you to compose your site using the latest front-end technologies of your choosing.  Love Angular, React or some old Famous animation; then use it in a clean way and don’t be stuck trying to use it in a way that only some random module says it can be used.

Use can use pure bootstrap (or Foundation) [add links]
Easily integrate JavaScript
If you hate PHP you are not stuck with it, you can use Node.js, RoR, Python or any other language and framework you choose.
Improved security (if you use a more secure front-end)
Improved
It is much easier than it sounds
You can more easily mix wordpress content with non-wordpress content
I’ve done demos using both
Potential for a richer UI/UX and faster browsing
SPA, turn your blog into a single page app and impress your friends

[links to other posts]

Disadvantages
Out of the box WordPress has an easy to use user front-end and numerous themes available for free or cheap on the web.  This

You can no longer use all those free wordpress themes
it does take more than casual programming
For a large site that has lots of content and numerous plugins, going headless could be a little time consuming
If are trying to use both wordpress and Drupal 7 (or lower) you have to use one via an API
I did some experiments in 2014 bootstraping both together and there are just too many conflicts.  Things may be different with Drupal 8

Basic headless

How to get headless working

In order to go headless you need to include wp-load.php, which is in the root of your wordpress code.  In my case I have wordpress in a folder wordpress/ which is inside lib/

define(‘WORDPRESS_ROOT’, ROOT.’/lib/wordpress’);

if ( !isset($wp_did_header) ) {

$wp_did_header = true;

require_once( WORDPRESS_ROOT . ’/wp-load.php’ );

}

after that you have WordPress running headless.

now try to pull some data.  For instance try,

$post = get_post(1); // get post is a WP function to pull a single blog post by post id

var_dump($post);

How-to with Erdiko-WordPress

going headless with Erdiko is very simple if you have composer.  In your favorite composer based framework or micro framework (Laravel, Symfony, Erdiko, Slim, etc) simply run

composer require erdiko/wordpress

you’re done.

To test it out create a route in your app and simply instantiate this model.

$wpModel = new /erdiko/wordpress/Model;

// you can call any wordpress api function for instance get_post()
$post = $wpModel->get_post(1);

var_dump($post);

https://github.com/ArroyoLabs/erdiko-wordpress

Multi-site

Multi-site works in a similar fashion, however some additional steps are needed to let WordPress know which site you are on.  Also depending on the use case there is some auto-routing you can do to make things easier.

This will be part of a future post.  It’s not as clean as the going headless on a single site.  If your multi-site is very complex you may struggle a bit running it headless.

Conclusions

Headless is great, but its not for everybody.  Keep in mind, in an enterprise scenario you either need to go headless or harden your out of the box WordPress app.

Next steps
We will post more examples and advanced use case throughout the year.  Please comment and share your thoughts if you would like to see a specific headless example.  Stay tuned!

Understanding AngularJS 2 vs AngularJS 1: Part 1

As I’m sure you know if you are reading this, the AngularJS team is planning for a major version release “very soon” that will include some major paradigm shifts. A lot of the things you learned while teaching yourself AngularJS 1.x will just not be present in AngularJS 2.

AngularJS 1.x is stable and will definitely be around for a long while with long term support from the original team. But do you really want to pass up on some of those amazing features (3-5x Performance increases, the ability to use Server Side Rendering, bragging rights)? No, of course not.

Just to make sure we can explain the concepts of Angular 2, let’s briefly review the main concepts of Angular 1.

Modules & Controllers

Controllers are just Javascript objects that create scope (more on this later), setting up attributes and functions. It’s the connection point for all scopes, functions and data sources in the application. These are similar to traffic cops that direct the flow and send data back and forth between the parts of your application.

A module can be thought of as the container that holds all the different parts of your AngularJS application. These have the advantage of making your code declarative and well encapsulated.

Directives

Custom HTML elements used to enable and interact with AngularJS. This cool feature is how we instantiate your app (`ng-app`) or create custom elements that transform data and views with JS logic stored in your models and controllers.

Here is an example of a directive in AngularJS 1.3 that replaced a `<burrito />` directive with an image of a burrito:

HTML

   <div>
<burrito></burrito>
</div>

JS

var app = angular.module(‘plunker’, []);

app.controller(‘MainCtrl’, function($scope) { });

app.directive(‘burrito’, function(){
return {
restrict: ‘E’,
replace: true,
scope: true,
template: ’<img src=“[ASSET SOURCE]” />’
};
});

Scope

The Application model and context, defined by an angular element. Defined hierarchically, scopes can be passed between elements

It’s important to note that Controllers, Services and Directives all have their own nested scopes. This can get messy when you are passing around data and need to make sure you aren’t polluting your own scope.

image

 

Databinding

 

While this is a great feature, it’s incredibly slow. Every digest cycle has to check ALL of these variables and update them appropriately.

Data binding is that magic that lets you sync data between your models and your view. In a sentence: your model’s data is bound to the view and your view is bound to your model’s data.

Here is a quick example:

HTML

<fieldset
<h1>Hello {{name}}!</h1>

<fieldset>

<label>an example of databinding:</label>

<br>

<input type=“text” ng-model=“name” />

JS

var app = angular.module(‘plunker’, []);app.controller(‘MainCtrl’, function($scope) {
$scope.name = ‘World’;
});

This is that awesome thing that does that sweet ‘live’ updating of values in your forms. Most likely, this was the huge selling point when you first started learning about AngularJS and the ‘reactive’ web.


We’ll explore where these things start to differ in Angular 2 in our next post

Talk about API first development

image

It was a pleasure speaking at the WAPRO event by Uncoded earlier this month.  I got to speak about API first architectures and open source mash ups with Erdiko.

API first is a technology paradigm for building apps that is emerging as an excellent way to think about your application and how it grows.  We’ve been a big fan of it for a while now.

The early days of web software (websites) were desktop first.  With the rise of smart phones and tablets it moved to a Mobile First paradigm.  We’re now seeing a shift to API First.

What does that mean?

It means that you are designing your app at the data and interaction level first.  This will inform your mobile UI, desktop UI, and public/partner APIs.

We will write more on this topic in posts to come.   Till then, download the slides from my talk in Long Beach, CA.

http://arroyolabs.com/downloads/talks/WAPRO-Talk.pdf

Tutorial: Doctrine DBAL (PHP Database Abstraction Layer)

This tutorial will show you how to connect a database using Doctrine DBAL.  The examples are for Erdiko, but could be applied to any PHP framework that uses composer.

Installation

If you have not installed Erdiko, please go to http://erdiko.org/getStarted.html#installation

To install Erdiko via Composer. simply run

composer create-project erdiko/erdiko my-project-name

After you have installed Erdiko (or your other favorite framework), it is very easy to install Doctrine.

via composer:

composer require doctrine/dbal 2.3.*

Alternatively, you can do it by hand by modifying the composer.json file in the root folder.  You just need to add this line:

{“require”: {“doctrine/dbal”: “2.3.4”}}

Then run ‘composer update’ to install Doctrine DBAL.

Basic usage

1. Getting a connection

We can get a connection through the DoctrineDBALDriverManager class.

$connectionParams = array(
    ‘dbname’ => ‘database_name’,
    ‘user’ => ‘user_name’,
    ‘password’ => ‘user_password’,
    ‘host’ => ‘localhost’,
    ‘driver’ => ‘pdo_mysql’
);
$conn = DoctrineDBALDriverManager::getConnection($connectionParams, $config);

Now, you are ready to retrieve and manipulate data.

2. Data Retrieval And Manipulation

After you have established a connection with database, it is easy to manipulation data.

In this tutorial, we create a table “Products" and create three fields for it.

The three fields are Name, Qty, and Price.

Inserting Data

$sql = “INSERT INTO Products (Name, Qty, Price) VALUES (‘Mango’, ’10’,5)”;
$stmt = $conn->query($sql);

Retrieving Data

$sql = “SELECT * FROM Products”;

$stmt = $conn->query($sql);

while ($row = $stmt->fetch()) {

    echo $row[‘Name’].’, Qty: ’.$row[‘Qty’].’, Price: ’.$row[‘Price’];

}

The output should be “Mango, Qty:10, Price:5”.

Advanced usage:

To perform fancy data manipulation or query, we will need to set up the class loader before establishing a connection.

Setting up class loader

We can open the Example controller(Example.php) under Erdiko/app/controllers/.

In the Example controller, we will need to add the following line before the class scope and it will allow the program to access the class ClassLoader.

use DoctrineCommonClassLoader;

Then, we can add the following code to a page.

$classLoader = new ClassLoader(‘Doctrine’);

$classLoader->register();

$config = new DoctrineDBALConfiguration();

Note: 

It is not a good practice to set connection parameters every time we get a connection with database.  A better way to do it would be storing all these parameters to a config file and creating a data model to read the config file.

For example, we can create a db.json config file under Erdiko/app/config/local/

In the db.json, we can set the connection parameters.

{

      “data":{       

          “dbname": ‘database_name’,

          “user": ‘user_name’,

          “password": ‘user_password’,

          “host": ‘localhost’,

          “driver": ‘pdo_mysql’

     }

}

Then, we can create a data model and it should looking something like below.

public function getDbConfig($dbConfig)

{

     $config = Erdiko::getConfig(“local/db”);

     $connectionParams = array(

         ‘dbname’ => $config[“data"][“dbname”],

         ‘user’ =>  $config[“data"][“user”],

         ‘password’ =>  $config[“data"][“password”],

         ‘host’ =>  $config[“data"][“host”],

         ‘driver’ =>  $config[“data"][“driver”],

     );

     return $connectionParams;

}

The getDbConfig function will make the program easy to maintain and also reduce the amount of code.

Now, getting a connection will be only required the following line:

$conn = DoctrineDBALDriverManager::getConnection($connectionParams, getDbConfig(‘data’));composer create-project erdiko/erdiko project-name

PHP mashups and micro frameworks

Over the last two years we’ve been developing our php micro framework.  It came out of the need for more concise theming and mashing up data sources.  This lead to the development of Erdiko.  It’s an MVC micro framework that facilitates lean stacks and cool mash-ups.  Our moto is, “Enterprise Glue.”

We developed a simple yet powerful framework to get work done quickly yet maintain efficiency on the server.  Unfortunately too many of the large php frameworks suffer from performance issues.  Its typically caused by code bloat and or too much automagic happening.  For some projects this is great, for others it just gets in the way.

image

MVC

On the view side, Erdiko supports standard php templates, markdown and handlebars.  On the controller side we package all our content to rendered through a Response object and theme and/or structure the data according to your needs.  A rest api or ajax request does not need a themed page wrapper for instance.  Structured json is preferred.

Here is an example of a coding simple page.  It sets the page title and renders a single view in the page body.  A controller method like, getHello() might look like this:

$this->setTitle(‘Hello World’);
$this->addView(‘examples/index’);

The model layer is the mash up layer.  We actually don’t include much code here intentionally.  The models should be based on what your project is trying to accomplish.  We don’t want to assume we know your data better than you do!  We will be adding support to pull data from Drupal, Magento and WordPress.  If you need an ORM or MySQL connector use Doctrine, Zend Models, or whatever works best for you.  We’ve used a number of data models in the past with erdiko.  Its great to be able to leverage some of the great PHP you already know.  We will be writing more blog posts to show you architectures and code styles that help you make a clean mash up.  We’re talking about sound engineering here, not some frankenstein monster 😉

Router

The router is based on ToroPHP which borrows the conventions from Tornado (popular Python framework).  We have the guts or Toro (single file framework of only 125 lines) underneath erdiko.  We mantain compatibility with toro yet extend it to meet the needs of erdiko.

All of the routes are defined in a simple json file with a concise syntax that supports expressions.  There are also hooks that can be used before and after controller requests

Closing

The framework is a culmination of years of software writing and working with both start ups and large enterprises.  It’s a work in progress but we use it in production and are constantly improving it.  We’ve tried a lot of different techniques and architectures, with the latest version of erdiko we did some serious rewrites and made something we’re proud of.

I hope you find it useful.  Please give us feedback, fork it, remix it, and contribute back.

Check out more at http://erdiko.org/

jQuery getSelector Plugin

jQuery getSelector Plugin

AngularJS JSONP GET Example

AngularJS JSONP GET Example

This is an example of a cross domain GET request using JSONP, the most common way to get data. Like the previous example using CORS, this too uses requires the server to be ‘aware’ of request so it can reply with the JSONP callback method.

The “P” in the JSONP actually stands for padding, which really means “Named Function”. You pass along a named javascript function that tells the server to wrap its response and when it responds your data is neatly wrapped with a helper function. This gets around the Same Origin Policy since <script> tags are ok’d for cross domain execution, which is how we can include JS libs from CDNs and other sources.

This method does require control over the request destination, or the site itself has to support a JSONP callback. This is just a javascript function returned from a ‘black box’, so there are some serious security concerns (but you’re not sending sensitive data via GET, right?). Also, we should note that this method have VERY limited support for reporting errors. Most people work around this by timing a response check and timeouts (which someday we may blog about).

AngularJS CORS example using httpbin.org

AngularJS CORS example using httpbin.org

This is an example of a cross domain GET and POST request to a server with CORS headers enabled. It’s a very simple one field form that displays the echo’d response from httpbin. I chose httpbin since I knew it had CORS headers enabled, and seemed like a relatively simplistic tool to play around with.

As the code shows, GET requests are quite simple and look like a regular $http call. The heavy lifting is all done by the server

The POST request on the other hand is a little more complicated and requires some manipulation of the headers before the request itself.

First, we need to set the Content-Type to form-urlencoded to let the destination know we are posting form data:

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

Second, we need to delete a header called “Requested-With” that is sent along with AJAX requests:

delete $http.defaults.headers.common['X-Requested-With'];

Also, to stop this mistruth from spreading any farther: A lot of blog posts about Cross Domain posting with Angular will show you this code:

$http.defaults.useXDomain = true

It’s not a real config value, you don’t need it. Seriously. Try it with and later without it, you won’t see a difference (I think the dojo toolkit may require it, I’m not sure how it made it’s way into multiple AngularJS examples).