WHAT IS A GOODWEB TECHNOLOGY

STACKTODAY?Gustaf Dalemar

You can't know where you're going until you know where you've

been- Someone

“”

1995 2000 2005 2010 2016

JAVASCRIPTIS BORN

1995 2000 2005 2010 2016

DHTML IS

INTRODUCED

1995 2000 2005 2010 2016

AJAX NEW

LIBRARIES

1995 2000 2005 2010 2016

MV* AND

BUILD TOOLS

1995 2000 2005 2010 2016

?

WEB DEVELOPMENT

IS MOVING FASTER THAN

EVER

WEBGLWEBASSEMBLEY

CSS3+ & HTML5NEW APIs

WEB COMPONENTSNEW VERSIONS OF JS

HIGHER EXPECTATIONSFIRST CLASS EXPERIENCE

FRAMEWORK- vs -

LIBRARIES

FROM FRAMEWORKSTO LIBRARIES

“JAVASCRIPT FATIGUE”We have become paralyzed by our own rate of invention

“ Whenever a new framework, tool or

technique comes out, I hear more groans than

celebrations ”http://wesbos.com/overwhelmed-with-web-development/

“ How are we supposed to get any work done

when everything keeps changing? ”http://wesbos.com/overwhelmed-with-web-development/

UNDERSTANDABLEBUT WE SHOULD NOT NEED TO FEEL THIS

HOW TO MANAGE

BECOME A HAPPY DEVELOPER

TAKEAWAYSDon’t try to know everything, is is not possible.There is no perfect solution. Hard to go totally

wrong.Wait for others and listen to what they are saying.

(Use Edge for instance)Stick to what you understand, don’t feel the need

to change everything at once.Experiment with new technologies in smaller

projects.The basics don’t change, focus on fundamentals.

WHAT IS A GOODWEB TECHNOLOGY

STACK TODAY?

I HAVE WORKED THE LAST YEAR

WITH CREATING FRONT END

STACKS

WARNINGTHE FOLLOWING SLIDES CONTAIN

HYPE & OPINIONS

!

VIEWReact with Flux Why?

Makes it easier for us to create user interfaces that are easy to reason about and are performant. Great DX. Use together with Redux and React Router.

Alternatives Cycle.js, Angular 2, Meteor, …

JAVASCRIPTES201X through Babel Why?

Makes it easier to write code that is both powerful and easy to understand. Use the syntax of tomorrow today.

Alternatives Traceur, Closure, TypeScript

CSSCSS Modules Why?

Makes it easier to manage CSS in a modular structure. This since it makes the normally globally scoped CSS locally scoped. Use together with your favorite preprocessor.

“Alternatives” Less, Sass, NextCSS, PostCSS

BUNDLERWebpack Why?

Primarily makes it possible to write code that uses modules and then run everything in the browser. Also adds additional features that makes it possible to replace task runners.

Alternatives Browserify, JSPM, Rollup

SERVERNode Why?

Logical to reuse the same logic both on the client and the server for a better user experience through universal (isomorphic) rendering. Often implemented with Express/Koa.

Alternatives Nothing really…

UNIVERSAL RENDERING

App API

ClientJavascrip

t

ServerJavascrip

t

APIGraphQL with Relay Why?

GraphQL makes it possible to define “queries” that talk to a single endpoint that will fetch exactly the data that we need. Something needed when apps become more modular and complex.

Alternatives Falcor, REST (In some language)

LINTINGESLint Why?

Makes it easier for use to write correct code, follow conventions and avoid silly mistakes.Alternatives JSHint, JSCS

TESTMocha + Karma + Expect Why?

A great set of tools to write tests, both for Node and for the browser. Can easily be combined with additional tools to make testing easier in for instance React.

Alternatives AVA, Chai, Jasmine, Jest, Tape

expect

PACKAGE MANAGER

npm Why?

Bower is declared dead and additionally npm can replace the need for Grunt and Gulp (when used together with for instance Webpack).

Alternatives Nothing in practice…

DEMOLET'S SEE MOST OF THIS IN ACTION

Demo was based on this project and used through Roc (see later slide). To get the same as shown in demo use Roc by doing the following:

See http://www.getroc.org/#install for how to set it up, quite straight forward and easy to do.

HOW DO WE USE

EVERYTHING TOGETHER?

BOILERPLATE

STARTER KIT

Copy all of this into a directory and change parts of it. It will work, we promise.

- Creator

GENERATORLIKE YEOMAN

MANUALLYHAND CRAFT IT WITH LOVE

WE NEED A BETTER SOLUTION

“Imagine the benefits of a framework with the flexibility of modern libraries”

RocRoc.jsAn ecosystem of complete and

versioned solutions, powered by an extendable and configurable

architecturehttp://getroc.org

THANKS FOR LISTENINGQUESTIONS?