Netlighter Gustaf Dalemar presentation at Edge Academy in Oslo. Web development is a constantly and rapidly changing area. There have never been as many choices as there are now when starting a new project and many developers are unsure where to begin. What is a good technology stack today? We will take a closer look at these different options together, talk about how we as developers can manage them and look closer at the approach that VG has taken to solve this issue. © All rights reserved.

1. WHAT IS A GOOD
WEB TECHNOLOGY STACK
TODAY?
Gustaf Dalemar

2. You can't know where
you're going until you know
where you've been
- Someone
“
”

3. 1995 2000 2005 2010 2016
JAVASCRIPT
IS BORN

4. 1995 2000 2005 2010 2016
DHTML
IS INTRODUCED

5. 1995 2000 2005 2010 2016
AJAX
NEW LIBRARIES

6. 1995 2000 2005 2010 2016
MV*
AND
BUILD TOOLS

7. 1995 2000 2005 2010 2016
?

8. WEB DEVELOPMENT
IS MOVING
FASTER THAN EVER

9. WEBGL
WEBASSEMBLEY
CSS3+ & HTML5
NEW APIs
WEB COMPONENTS
NEW VERSIONS OF JS

10. HIGHER EXPECTATIONS
FIRST CLASS EXPERIENCE

11. FRAMEWORK
- vs -
LIBRARIES
FROM FRAMEWORKS
TO LIBRARIES

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

13. “ Whenever a new
framework, tool or
technique comes out, I hear
more groans than
celebrations ”
http://wesbos.com/overwhelmed-with-web-development/

14. “ How are we supposed to
get any work done when
everything keeps changing?
”
http://wesbos.com/overwhelmed-with-web-development/

15. UNDERSTANDABLE
BUT WE SHOULD NOT NEED TO FEEL THIS

16. HOW TO MANAGE
BECOME A HAPPY DEVELOPER

17. TAKEAWAYS
Don’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.

18. WHAT IS A GOOD
WEB TECHNOLOGY
STACK TODAY?

19. I HAVE WORKED
THE LAST YEAR
WITH
CREATING FRONT END STACKS

20. WARNING
THE FOLLOWING SLIDES CONTAIN
HYPE & OPINIONS
!

21. VIEW
React 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, …

22. JAVASCRIPT
ES201X 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

23. CSS
CSS 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

24. BUNDLER
Webpack 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

25. SERVER
Node 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…

26. UNIVERSAL RENDERING
App API
Client
Javascript
Server
Javascript

27. API
GraphQL 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)

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

29. TEST
Mocha + 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

30. 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…

31. DEMO
LET'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.

32. HOW DO WE
USE
EVERYTHING
TOGETHER?

33. BOILERPLAT
E
STARTER KIT
Copy all of this into
a directory and
change parts of it. It
will work, we
promise.
- Creator

34. GENERATOR
LIKE YEOMAN

35. MANUALLY
HAND CRAFT IT WITH LOVE

36. WE NEED A BETTER
SOLUTION
“Imagine the benefits of a framework with the flexibility of
modern libraries”

37. RocRoc.js
An ecosystem of complete and versioned
solutions, powered by an extendable and
configurable architecture
http://getroc.org

38. THANKS FOR LISTENING
QUESTIONS?