Download - What is a good technology stack today?
![Page 1: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/1.jpg)
WHAT IS A GOODWEB TECHNOLOGY
STACKTODAY?Gustaf Dalemar
![Page 2: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/2.jpg)
You can't know where you're going until you know where you've
been- Someone
“”
![Page 3: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/3.jpg)
1995 2000 2005 2010 2016
JAVASCRIPTIS BORN
![Page 4: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/4.jpg)
1995 2000 2005 2010 2016
DHTML IS
INTRODUCED
![Page 5: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/5.jpg)
1995 2000 2005 2010 2016
AJAX NEW
LIBRARIES
![Page 6: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/6.jpg)
1995 2000 2005 2010 2016
MV* AND
BUILD TOOLS
![Page 7: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/7.jpg)
1995 2000 2005 2010 2016
?
![Page 8: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/8.jpg)
WEB DEVELOPMENT
IS MOVING FASTER THAN
EVER
![Page 9: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/9.jpg)
WEBGLWEBASSEMBLEY
CSS3+ & HTML5NEW APIs
WEB COMPONENTSNEW VERSIONS OF JS
![Page 10: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/10.jpg)
HIGHER EXPECTATIONSFIRST CLASS EXPERIENCE
![Page 11: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/11.jpg)
FRAMEWORK- vs -
LIBRARIES
FROM FRAMEWORKSTO LIBRARIES
![Page 12: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/12.jpg)
“JAVASCRIPT FATIGUE”We have become paralyzed by our own rate of invention
![Page 13: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/13.jpg)
“ Whenever a new framework, tool or
technique comes out, I hear more groans than
celebrations ”http://wesbos.com/overwhelmed-with-web-development/
![Page 14: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/14.jpg)
“ How are we supposed to get any work done
when everything keeps changing? ”http://wesbos.com/overwhelmed-with-web-development/
![Page 15: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/15.jpg)
UNDERSTANDABLEBUT WE SHOULD NOT NEED TO FEEL THIS
![Page 16: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/16.jpg)
HOW TO MANAGE
BECOME A HAPPY DEVELOPER
![Page 17: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/17.jpg)
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.
![Page 18: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/18.jpg)
WHAT IS A GOODWEB TECHNOLOGY
STACK TODAY?
![Page 19: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/19.jpg)
I HAVE WORKED THE LAST YEAR
WITH CREATING FRONT END
STACKS
![Page 20: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/20.jpg)
WARNINGTHE FOLLOWING SLIDES CONTAIN
HYPE & OPINIONS
!
![Page 21: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/21.jpg)
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, …
![Page 22: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/22.jpg)
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
![Page 23: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/23.jpg)
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
![Page 24: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/24.jpg)
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
![Page 25: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/25.jpg)
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…
![Page 26: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/26.jpg)
UNIVERSAL RENDERING
App API
ClientJavascrip
t
ServerJavascrip
t
![Page 27: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/27.jpg)
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)
![Page 28: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/28.jpg)
LINTINGESLint Why?
Makes it easier for use to write correct code, follow conventions and avoid silly mistakes.Alternatives JSHint, JSCS
![Page 29: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/29.jpg)
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
![Page 30: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/30.jpg)
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…
![Page 31: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/31.jpg)
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.
![Page 32: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/32.jpg)
HOW DO WE USE
EVERYTHING TOGETHER?
![Page 33: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/33.jpg)
BOILERPLATE
STARTER KIT
Copy all of this into a directory and change parts of it. It will work, we promise.
- Creator
![Page 34: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/34.jpg)
GENERATORLIKE YEOMAN
![Page 35: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/35.jpg)
MANUALLYHAND CRAFT IT WITH LOVE
![Page 36: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/36.jpg)
WE NEED A BETTER SOLUTION
“Imagine the benefits of a framework with the flexibility of modern libraries”
![Page 37: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/37.jpg)
RocRoc.jsAn ecosystem of complete and
versioned solutions, powered by an extendable and configurable
architecturehttp://getroc.org
![Page 38: What is a good technology stack today?](https://reader036.vdocument.in/reader036/viewer/2022062522/587893eb1a28ab375f8b632d/html5/thumbnails/38.jpg)
THANKS FOR LISTENINGQUESTIONS?