About me...

• I'm Jacob Clark
• A Web Developer in Knowledge and Learning
• Based in MediaCityUK, Salford
• Passionate about modular, self containing components and the cloud (microservices)

I'm currently working on...

• The next version of BBC Food (in the cloud).
• Continous intergration in the cloud (Jenkins, Amazon Web Services)

I've previously worked on...

• BBC iWonder
• Genre Portals including Arts, Make it Digital, Earth, Science, History
• Internal development tooling

What is iWonder?

An online portal to content across the BBC

Who is our audience?

• Schools
• Colleges/University researchers
• Informal learners
• The curious
• Those looking for more out of their TV experience

Viewing trends...

• Desktop PCs (Libraries, Schools)
• Mobile Phones
• Tablets
• Smart TVs
• Game consoles

Browsers and devices we support

We support a huge array of browsers and devices, including (but not limited to):

• Internet Explorer 8+, Chrome, Firefox, Safari, Opera
• iPad (All generations), iPhone (All generations), Samsung S series, Nexus Tablets, Amazon Fire Tablets
• Screen readers & accessability devices

How do we do it?

Due to the potential hundreds of different browsers we support, BBC iWonder needs to be responsive, accessible on a wide variety of platforms from Smartphones to Smart TVs and fast for those slow connections.

BBC iWonder cuts the mustard

Questions?

Mobile first design

Building a responsive page for mobile first....

Mobile

Tablet

Desktop

Questions?

Cutting the mustard!

Developing for the lowest comon denominator and enchancing progressively.

Our stack

BBC iWonder is built with a wide variety of technologies, including:

• PHP (Laravel, Blade)
• HTML5
• CSS (BEM)
• JavaScript (AMD)
• Amazon Web Services

How we built it

Each part of iWonder is built into it's own modular component, using cutting edge, front end webtechnologies, including modular JavaScript and BEM CSS!

iWonder is made up of several components, including:

• Hero Image
• Group Promos
• iWonder
• Timeline
• Card Promo
• Quote of the Day

Questions?

BEM

BEM is a methodology for building modular front end layouts, fast.

It defines naming conventions to use in front end layouts for HTML class names and CSS.

BEM stands for Block Element Modifier.

(.block__element-modifier)

BEM (cont)

BEM sounds confusing at first, but when you put it into context it all comes together. Take the Hero Image of iWonder for example: 

Why?

Developing layouts in BEM allow us to create modular, resuable components that we can place anywhere.

Developers no longer need to worry about CSS specificity issues where component styles clash causing weird behaviour.

Link: BEM

Building the hero image! (bem)

Demo!

Questions?

Require.js - AMD

Building modern web applications with fantastic user experiences, forces us to use JavcScript to improve our audiences experiences.

The nature of JavaScript by default means code can become unweidly and difficult to maintain.

Require.js fixes this problem. It allows us to define our JavaScript into their own modules, which can be required anywhere within an application and re-used.

Require.js

Require.js allows us to cut the mustard, we can use progressive enhancement to initialise modules and deliver a consistent experience cross browsers.

Link: Require.js

Building the hero image! (require.js)

Demo!

Questions?

slidesLeft.length === 0

I'm totally out of slides now...

Let's have an open discussion on modern web development!