WebGL 1 with ESSL 100, you declare a varying in both the vertex and fragment shaders, like so:

varying vec4 vVertexPosition;
varying vec3 vVertexNormal;

In WebGL 2 with ESSL 300, in the vertex shader, the varyings become this:

out vec4 vVertexPosition;
out vec3 vVertexNormal;

And in the fragment shader, they become this:

in vec4 vVertexPosition;
in vec3 vVertexNormal;

Now, let's plug the attributes, uniforms, and varyings into the code and see what the vertex shader and fragment shader look like.