developmental-breakfast-2

View Github Repository Open presentation in a new window

janraasch

See all presentation from janraasch

developmental-breakfast-2

0 0

developmental-breakfast-2

2nd issue of the »Developmental Breakfast« series at tolingo GmbH

On Github janraasch / developmental-breakfast-2

developmental breakfast

numero duo

Watch the video https://www.youtube.com/watch?v=st21dIMaGMs to find out more about »continental breakfast«.

The Emperor's New Clothes

- Dänisches Märchen von 1836 - Kaiser lässt sich neue Kleider nähen von zwei Scharlatanen - Kleider seien nicht gewöhnlich - könnten nur von Personen gesehen werden, die ihres Amts würdig und nicht dumm seien - Aus Eitelkeit und innerer Unsicherheit erwähnt er nicht, dass er die Kleider selbst auch nicht sehen kann - auch die Menschen, denen er seine neuen Gewänder präsentiert, geben Begeisterung über die scheinbar schönen Stoffe vor. - Der Schwindel fliegt erst bei einem Festumzug auf, als ein Kind sagt, der Kaiser habe gar keine Kleider an, diese Aussage sich in der Menge verbreitete und dies zuletzt das ganze Volk rief. Geschichte: https://de.wikipedia.org/wiki/Des_Kaisers_neue_Kleider Software-Geschichte: z.B. legacy Rails-App

Modern Frontend Tooling

Prepare yourself for buzz words and name dropping.

var buzz_words = ["es6", "es7", "es2015", "modules", "react", "couchdb", "hot-code-swapping", "live-reloading", "testing", "cross devise", "cross browser", "grunt", "gulp", "webpack", "broswerify", "eslint", "jshint", "jscs", "and", "so", "on", "and", "so", "forth"]
new Promise((resolve, reject) => {
  resolve(buzz_words)
}).then((buzz) => console.log('da latest in', buzz))
- Ich werde nicht auf alles eingehen, aber ein paar Dinge, die wir auch im Couchboard verwenden. - Idee ist, auf ein paar Sachen eingehen und dann Demo-Time mit couchboard und PMTool.

Linting

- Code Conventions - Best practices - Syntax errors (and problems; I am looking at you, JavaScript) - Fast feedback when writing code through editor integration

ESLint

  • Supports ES2015 and JSX
  • Pluggable
  • Operates on AST
  • More than just white space issues
  • De facto standard for »grüne Wiese« React projects
  • airbnb styleguide available as config

Alternatives: JSHint, jscs

(Unit) Tests

Karma

  • Browser independent
  • SauceLabs integration
  • Easily integrated into dev workflow using PhantomJS and karma watch
  • Battle tested
  • Originally built and used by the AngularJS team at Google

- Not sure, if this could be used to run tests on node, but tape could do that. - Alternative: tape

Dependency management

powered by npm and gemnasium

- No funny intro slide. - In a world where people still download, and copy and paste jquery.min.js into vendor/assets we do need to mention this. - So all dependencies (runtime and development) are npm packages. - Integrates well with the rails/ruby/ruby-gem stack through gemnasium - Alternatives: bower, jspm, greenkeeper

Module loading aka »bringing it all together«

powered by webpack

  • Supports ES2015 through Babel
  • Supports hot code swapping
  • Easily integrated into dev workflow using webpack-devserver
  • webpack-devserver plays nice with other backends
  • De facto standard for »grüne Wiese« React projects
- Really the key to the integration into the Rails workflow: webpack-devserver - Alternatves: Require.JS, browserify

before we move into demo land

Demo

in some other browser tab... see you guys later...

Image is taken from Why your product demo sucks, and you're losing customers as a result blog post. Hence the connection to demo. Demo Steps: - Linting in atom. - Karma tests with watch running next to atom. Break something and fix it. - PMTool, webpack-watch: Chrome Source-Maps, Editing in Atom, Editing in Chrome. Paying homage and looking into the future (optional): - Do hot-loading demo? Maybe: https://github.com/gaearon/react-transform-boilerplate - Show: figwheel demo or elm? Gains: - Integriert sich nahtlos in bestehendes Frontend ohne irgendwelche Überkreuzungen - Testlaufzeit - Backend-independent TDD - Überall einsetzbar (by abstract render(infocards) interface) - Easy to iterate - Easy to add more goodness Pains: - Cognitive load for developer (two repos) - new/different stack

Discussion Time

Empty slide for concentration

ahh ...this is nice

Next Time

  • Any ideas on what to talk about next?
  • Who would like to organize the next developmental breakfast event?
developmental breakfast numero duo Watch the video https://www.youtube.com/watch?v=st21dIMaGMs to find out more about »continental breakfast«.