Advanced Frontend Development

Slides for a local meetup in Bristol to talk about some mid to advanced level web frontend development.

Transcript

1. ADVANCED FRONTEND DEVELOPMENT 2015 edankwan.com/@edankwan
2. HELLO,
3. OBJECTIVES • Creative Frontend development • Animation • WebGL/GLSL
4. CREATIVE FRONTEND DEVELOPMENT 3D-it : http://www.edankwan.com/lab/3dit JSFeat + delaunay : http://codepen.io/edankwan/pen/RNzBgR​
5. “If you can’t resolve the problem mathematically, try to resolve it visually.” Edan Kwan(1986-present)
6. 3D Globe - http://codepen.io/edankwan/pen/emqgpr Fake 3D - http://codepen.io/edankwan/pen/HokCx​
7. ANIMATION function loop() { // clamp at maximum 60fps in browser requestAnimationFrame(loop); render(); } function render() { // draw something }
8. Reference: https://www.desmos.com/calculator/dvjcecgagy LERP function lerp(from, to, ratio) { return from + (to - from) * ratio; } Example: https://jsfiddle.net/5r6u5jt4/light/
9. TWEEN ENGINES • Tweenmax • Tween.js • EKTweener.js TweenMax.to(elem, duration, {property: value, ease: easingFunction}); TweenMax.fromTo(elem, duration, {property: fromValue}, {property: toValue});
10. Robert Penner's easing functions http://codepen.io/edankwan/pen/OPewzj
11. WHICH EASING FUNCTION SHOULD I USE? easeInOut easeIn / easeOut
12. EXERCISE TIME
13. WHAT'S WEBGL? • OpenGL ES 2.0 • Lower level API • Experimental(still) WebGL !== 3D !==Three.JS
14. SHADER LANGUAGE (GLSL) Vertex Shader Fragment Shader
15. VERTEX SHADER • gl.POINTS • gl.LINES • gl.LINE_STRIP • gl.LINE_LOOP • gl.TRIANGLES • gl.TRIANGLE_STRIP • gl.TRIANGLE_FAN var vertices = [x0, y0, x1, y1, x2, y2...] gl.drawArrays(gl.triangles, .. // OR DrawElements with Indices gl.drawElements(gl.triangles, .. JS with WebGL API GLSL attribute vec2 aPosition; void main(void) { gl_Position = vec4(aPosition, 0.0, 1.0); }
16. FRAGMENT SHADER var texture = gl.createTexture(); texture.image = image; gl.bindTexture(gl.TEXTURE_2D, texture); uniform sampler2D uTexture; varying vec2 vTexCoord; void main() { gl_FragColor = texture2D(uTexture, vTexCoord); } GLSL JS with WebGL API
17. GLSL QUALIFIER • attributes • uniform • varying
18. BASIC GLSL DATA TYPES • float • bool • int • vec2 • vec3 • vec4 • ivec2... • bvec2... • mat2 • mat3 • mat4
19. EXERCISE TIME
20. DAILY AWARD WINNING SITES fwa awwwards css design awards
21. THANK YOU