frontend as a first class citizen
Post on 14-Aug-2015
89 Views
Preview:
TRANSCRIPT
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!
top related