Frontend as a first class citizenModern JavaScript in practice

Marcin Grzywaczewski (@Killavus) 2015

Who am I?• Working @ Arkency for 2+ years so far

• We are making products - 3 successful books so far

• We are making client projects

• Co-author of Rails meets React.js book

• React.js enthusiast

• Twitter: @Killavus

• Blogging on http://blog.arkency.com

Rails meets React.js• 150~ pages of the main content -

hands-on examples, theory, best practices, testing

• 50+ pages of bonus content - our best articles and examples we made so far

• Made for Rails developers, but mainly focused on React itself - you don’t need to be a Rails developer

Grab your copy with 25% discount using

ITCORNER coupon code. Valid for 1 week.

Buy now!

Something changed in web development

world…

Social media platforms?

Not quite.

Why should I bother?“My static app works very well!”

Why should I bother?• Your stakeholders use Facebook & Twitter

• Your end-users use Facebook & Twitter

• They are accustomed to rich user experience

• Requirements about the dynamic UI happens, because people who state requirements know they are possible

• They use FB and Twitter after all!

• Enhancing static views with JS snippets often leads to maintainability hell

Why should I bother?• Frontend development skills are more and more sought

nowadays by companies

• Frontend development is fun - and I will show you why

• Browser is the secondary OS now

• More and more apps going web

• Portability problems mostly gone

• You don’t need an additional software

• Examples: Google Docs, Hackpad, Slack, Trello

OK. But JavaScript is scary/ugly!

Transpilation• JavaScript malleability is awesome - and we can use it

• There are variety of languages which are transformed to JavaScript in a process of ‘compilation’ (transpilation)

• For functional fundamentalists: PureScript (if you come from Haskell, Scala etc.)

• For type checking lovers: TypeScript (the most popular in C# communities)

• For Rubyists: CoffeeScript (a bit like Python, a bit like Ruby) / Opal.rb (Ruby itself)

• For Lisp fans: ClojureScript

• and so on…

Compare it by yourself

TodoMVC project http://todomvc.com

Many implementations of the same (simple) app using transpiled languages, popular frameworks and so on.

Warning: Inception

Transpile JavaScript to JavaScript!

• Yeah, that’s the real thing

• There is a new standard - called ECMAScript 6

• Many improvements to regular JavaScript

• More familiar object construction with class syntax

• Improvements to scope - let keyword

• Destructuring support

• Arrow syntax

• More: https://babeljs.io/docs/learn-es2015/

• It’ll be a standard in browsers - but for now you must transpile it to ‘old’ JavaScript

But Javascript tooling is insufficient!

You got frameworks• Great for fast prototyping

• Falls off when it comes to big apps - typical framework’s tradeoff

• Examples (most popular):

• Angular.js

• Ember.js

• Knockout.js

• Backbone

• Much more! There is a saying that there is a new JS framework everyday ;)

You got libraries• Data manipulation libraries (a.k.a. stdlib

replacements)

• lodash / underscore (functional style)

• Sugar.js (Ruby style)

• Wu.js

• Immutable.js

Even more libraries• AJAX libraries

• Superagent

• github/fetch

• Axios

• jQuery (yeah, it’s AJAX support is good enough)

Even MORE libraries

• DOM manipulation

• jQuery

• React.js

• Web Components

• Om (for ClojureScript only)

… and more libraries?• Communication

• Reactive streams

• Bacon.js

• RxJS

• Event systems

• Backbone events

• Flux utility libraries for stores/actions

• AOP

• YouAreDaBomb

But there’s no way to structure your app

beyond frameworks!

Architectures

• Hexagonal.js (http://hexagonaljs.com)

• Flux (http://facebook.github.io/flux/)

• The old ones: MVC / MVVM / MVP - tooling is there too

• Or write it by yourself, it’s easy

Bold statement: You can’t escape from frontend

But it is good!• Your user experience will be improved

• Support for accessibility improved too (WAI-ARIA)

• Good techniques for your stakeholders

• Frontend first - fail even faster with your prototypes

• Good techniques for your project

• Splitting to API/Frontend projects - allows independent scaling / hosting

• Frontend finally testable - it’s code after all.

• Structurized frontend vs. jQuery soup

Take the first steps• We got plenty of materials about modern

JavaScript and frontend development.

• React.js koans: https://github.com/arkency/reactjs_koans

• Scaffolded Rails views to React.js in 20 commits: https://github.com/arkency/scaffold-to-react

• Subscribe to our frontend course: http://bit.ly/1f0bKyy

Rails meets React.js• 150~ pages of the main content -

hands-on examples, theory, best practices, testing

• 50+ pages of bonus content - our best articles and examples we made so far

• Made for Rails developers, but mainly focused on React itself - you don’t need to be a Rails developer

Grab your copy with 25% discount using

ITCORNER coupon code. Valid for 1 week.

Buy now!

Questions?

Thank you!