ADVANCING THE WEB WITHOUT BREAKING IT

CHRIS HEILMANN (@CODEPO8), BEYOND TELLERAND 2015, DÜSSELDORF

THIS IS A TIME OF CLASHES…

THIS IS A TIME OF CLASHES…

• Native vs. Web • io vs node • virtual DOM vs. DOM • App vs. Web Site • SASS vs. CSS • Angular vs. React • Gulp vs. Grunt • Düsseldorf vs. Köln

AND BOY, DO WE WRITE AND POST AND DISCUSS A LOT ABOUT ALL OF THAT…

FRANKLY, I AM GETTING TIRED OF THIS…

WE CARED ABOUT THE WEB AS AN INFRASTRUCTURE AND A PUBLICATION PLATFORM. Amount of

comments

Shits I am ready to

give

HACKER NEWS DRAMA

BACK IN THE DAYS, WEB DEVELOPERS WERE INNOVATORS.

WE HAD NO CLUE WHAT BROWSERS DID. WE USED WHAT WE HAD AND HACKED AROUND THE PROBLEMS.

• Sliding Doors • CSS Sprites • FIR • Clearfix • …

ALL OF THESE TECHNIQUES WERE AIMED AT CREATING USER INTERFACES.

WE CARED ABOUT THE WEB AS AN INFRASTRUCTURE AND A PUBLICATION PLATFORM.

NOW WE ARE IN THE MIDDLE OF A ENGINEERING TAKEOVER.

THE WEB HAS BECOME MORE COMPLEX

• We know the inner workings of browsers

• A lot of the web innovation happens in the open

• JavaScript is server and client side

• With mobile, we have a fast growing market that treats web content and technology as 2nd class.

AND THAT IS VERY EXCITING!

WE DON’T DEMAND THE IMPORTANT, BASIC THINGS FROM BROWSER MAKERS.

TO BE A “MODERN” FULL STACK DEVELOPER YOU NEED TO USE…

• Task runners • CSS preprocessors • Package managers • MVC Frameworks • Unit tests • A “modern” development

environment with live reload and 360° inspection.

“Magical Framework and modern solution to everything and more” of this month.

or…

THIS IS UNDERSTANDABLE. WE HAVE GREAT TOOLS AND POWER AND ARE CONSTANTLY REMINDED THAT TIME IS OF THE ESSENCE.

Steve Jobs/Apple Sergey Brin / Google

Mark Zuckerberg/FacebookTravis Kalanick / Uber

When you see something that is technically sweet, you go ahead and do it and you argue about what to do about it only after you have had your technical success.

When you see something that is technically sweet, you go ahead and do it and you argue about what to do about it only after you have had your technical success.

That is the way it was with the atomic bomb.

J. Robert Oppenheimer/Manhattan Project

STORIES OF GREAT, QUICK SUCCESS ALWAYS RESULT IN STRESS AND UNHEALTHY COMPETITION

I DON’T WANT TO PLAY THAT GAME.

ZOMG CODE IS EVERYTHING!

EVERYBODY NEEDS TO LEARN TO CODE!

https://twitter.com/StartupLJackson/status/594283350019280897

CODE

NOT EVERYBODY NEEDS TO CODE.

EVERYBODY NEEDS TO LEARN TO CREATE AND CARE.

WE REALLY DROPPED THE BALL ON THAT ONE.

THE LURE OF THE WEB FOR COMPANIES AND DEVELOPERS IS FADING.

OLD CLUTTER, NEW WEB?

https://twitter.com/Caged/status/590602214021922818

WE NEED TO CHANGE AND ADAPT.

AND IT IS TIME WE FACED SOME COMMERCIAL FACTS.

OUR BEST PRACTICES AND IDEALS ALL DEAL WITH LONGEVITY AND STURDINESS.

AND WE SEEM TO GET INTO A WORLD WHERE ONLY WE CARE.

“We crave for new sensations but soon become indifferent to them. The wonders of yesterday are today common occurrences.”

― Nikola Tesla, My Inventions

ARE YOU READY TO ROCK THE WORLD OF “GENERATION SELFIE”?

TIMELESS BEAUTY AND DESIGN…

LET’S GET THEM YOUNG AND KEEP THEM FOR LIFE?

WE’RE TRYING TO COMPETE WITH A MARKET DESIGNED TO BE SHORT-LIVED WITH IDEALS OF LONGEVITY.

AT THE SAME TIME, OUR WORLD IS MORE AMAZING THAN EVER.

• Google implementing Microsoft’s Pointer Events

• Microsoft implementing Adobe’s CSS blend modes code

• Manifold.js - create native apps from web code with W3C manifest

• Vorlon.js - debug across all platforms

LET ME TAKE YOU BACK TO SOMETHING I LOVED AS A TEENAGER.

WE’RE TRYING TO COMPETE WITH A MARKET DESIGNED TO BE SHORT-LIVED WITH IDEALS OF LONGEVITY.

160 × 200 PIXELS (ON A 320 × 200 PIXELS DISPLAY)

16 PREDEFINED COLOURS 1 SCREEN-WIDE BACKGROUND COLOUR. 3 COLOURS IN EACH 8 × 8 (4 × 2) PIXEL SQUARE

160 × 200 PIXELS (ON A 320 × 200 PIXELS DISPLAY)

16 PREDEFINED COLOURS 1 SCREEN-WIDE BACKGROUND COLOUR. 3 COLOURS IN EACH 8 × 8 (4 × 2) PIXEL SQUARE

160 × 200 PIXELS (ON A 320 × 200 PIXELS DISPLAY)

16 PREDEFINED COLOURS 1 SCREEN-WIDE BACKGROUND COLOUR. 3 COLOURS IN EACH 8 × 8 (4 × 2) PIXEL SQUARE

160 × 200 PIXELS (ON A 320 × 200 PIXELS DISPLAY)

16 PREDEFINED COLOURS 1 SCREEN-WIDE BACKGROUND COLOUR. 3 COLOURS IN EACH 8 × 8 (4 × 2) PIXEL SQUARE

• MUCH BETTER TOOLING • EXPERIENCE • SHARED TRICKERY AND

KNOWLEDGE • A LOT OF SHITS GIVEN.

EXCELLENCE ≠ INNOVATION + IMPLEMENTATION

EXCELLENCE = (TALENT + EFFORT + TOOLS) * SHITS GIVEN

TOOLS ARE ALL ABOUT THE MINIMUM VIABLE PRODUCT.

LET’S GO AND BUILD GREAT PRODUCTS FOR EVERYBODY

EXCELLENCE = (TALENT + EFFORT) * SHITS GIVEN

YOU’RE ANGRY AND THIS OBVIOUSLY ANNOYS YOU…

WHAT ARE YOU GOING TO DO

ABOUT IT?

Chris

christianheilmann.com

@codepo8

Thanks!