I'm using 'attribute' in a vertex shader to define a couple of variables like so:
attribute mediump vec4 Position;
attribute lowp vec4 SourceColor;
Looking around, I found something called 'layout' which seems to do the same task.
For example I think the above could be rewritten as:
layout(location = 0) in vec4 Position;
layout(location = 1) in vec4 SourceColor;
I've never used layout before so I'm not sure if it works the same, but it looks pretty similar to me, and the wiki pages don't particularly help me tell them apart.
Could someone please explain the difference between attribute and layout?
What you're seeing is different versions of GLSL.
In OpenGLES2 the only available version of GLSL available to you is GLSL ES 100. This looks like the first code block you posted.
In OpenGLES3 you can still use GLSLES 100, but can also use GLSL ES 300 which looks like the latter post.
As well as the GLSL ES versions there are many desktop GLSL versions. This doc might help you get your bearings a bit.
TLDR - Your first code snippet is the old way, the second code snippet is the new way. With OpenGLES 2, your only choice is the old way.