Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pragmatic Web Components

Avatar for Nicolas Mérouze Nicolas Mérouze
February 04, 2014
Programming
1
83

Pragmatic Web Components

Pragmatic RESTful APIs mixed with Web Components for a flexible frontend development.

Avatar for Nicolas Mérouze

Nicolas Mérouze

February 04, 2014
Tweet

More Decks by Nicolas Mérouze

See All by Nicolas Mérouze
Table-Driven Testing
Avatar for Nicolas Mérouze nmerouze
0
71
Make Hypermedia APIs in Ruby
Avatar for Nicolas Mérouze nmerouze
4
440
Netty with JRuby (French)
Avatar for Nicolas Mérouze nmerouze
2
240

Other Decks in Programming

See All in Programming
CSC509 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
Avatar for Yusaku Nishi jrsaruo
0
140
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
Avatar for Itaru Ota ota1022
0
240
Reduxモダナイズ　〜コードのモダン化を通して、将来のライブラリ移行に備える〜
Avatar for pvcresin pvcresin
2
690
なぜGoのジェネリクスはこの形なのか？ Featherweight Goが明かす設計の核心
Avatar for Ryotaro ryotaros
7
1k
Local Peer-to-Peer APIはどのように使われていくのか？
Avatar for Hal hal_spidernight
2
460
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
CSC509 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
440
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
Avatar for shibayu36 shibayu36
3
4.6k
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
200
After go func(): Goroutines Through a Beginner’s Eye
Avatar for Vaibhav Gupta 97vaibhav
0
240
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
Avatar for MinoDriven minodriven
23
12k

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2k

Transcript

  1. Pragmatic Web Components

  2. Web Component ?

  3. Make your own HTML elements

  4. Reuse code

  5. Pragmatic ?

  6. Hypermedia/Pragmatic APIs

  7. Let the API do the work

  8. Example: Pagination

  9. Rails Way

  10. gem 'kaminari'

  11. class PostsController < ApplicationController def index @posts = Post.page(params[:page]) end

    end

  12. <%= @posts.total_count %> résultats <%= paginate @posts %>

  13. 30 résultats < Prev Next >

  14. API + React.js

  15. gem 'active_model_serializers'

  16. class PostSerializer < ActiveModel::Serializer attributes :id, :title, :body end

  17. { "posts": [{ "id": "1", "title": "foobar", "body": "such foobar"

    }] }

  18. class PostsController < ApplicationController def index page = (params[:page] ||

    1).to_i @posts = Post.page(page) pagination = { totalCount: @posts.total_count } pagination[:next] = posts_url(page: page + 1) unless page == @posts.total_pages pagination[:prev] = posts_url(page: page - 1) unless page == 1 render json: @posts, meta: { pagination: pagination } end end

  19. { "meta": { "pagination": { "totalCount": 30, "next": "http://localhost:3000/posts?page=3", "prev":

    "http://localhost:3000/posts?page=1" } } "posts": [{ "id": "1", "title": "foobar", "body": "such foobar" }] }

  20. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pragmatic Web Components</title>

    </head> <body> <div id="pagination"></div> </body> </html>

  21. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pragmatic Web Components</title>

    <script src="//fb.me/JSXTransformer-0.8.0.js"></script> <script src="//fb.me/react-0.8.0.js"></script> </head> <body> <div id="pagination"></div> <script type="text/jsx"> /** @jsx React.DOM */ React.renderComponent(<Paginaton/>, document.getElementById('pagination')); </script> </body> </html>

  22. <script type="text/jsx"> /** @jsx React.DOM */ var Paginaton = React.createClass({

    render: function() { return ( <div> <div>{this.state.totalCount} résultats</div> <div> <a href={this.state.prev} onClick={this.prevPage}>‹ Prev</a> <a href={this.state.next} onClick={this.nextPage}>Next ›</a> </div> </div> ); } }); </script>

  23. <script type="text/jsx"> /** @jsx React.DOM */ var Paginaton = React.createClass({

    getInitialState: function() { return { totalCount: 0, next: null, prev: null }; }, // render }); </script>

  24. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></ script> <script type="text/jsx"> /** @jsx React.DOM */ var

    Paginaton = React.createClass({ componentDidMount: function() { this.fetchPosts("/posts"); }, fetchPosts: function(url) { var self = this; $.getJSON(url, function(data) { var pagination = data.meta.pagination; self.setState({ totalCount: pagination.totalCount, next: pagination.next, prev: pagination.prev }); }); }, prevPage: function(e) { this.fetchPosts(this.state.prev); return false; }, nextPage: function(e) { this.fetchPosts(this.state.next); return false; }, // getInitialState, render }); </script>

  25. 30 résultats < Prev Next >

  26. More features: link component, display posts

  27. Apply everywhere

  28. Forms (Validations, Errors, Search)

  29. Breadcrumbs, Flashes, Tabs, Tables

  30. Web Components standard http://w3.org/TR/components-intro

  31. React.js http://facebook.github.io/react

  32. x-tags http://x-tags.org

  33. polymer http://polymer-project.org

  34. Ember.js http://ember.js

  35. What we saw today?

  36. Web Components are simple and usable today

  37. More information in your API == less code for the

    frontend

  38. Rails is great for APIs with ActiveModel::Serializers

  39. Nicolas Mérouze http://merouze.me

  40. In-App Cloud http://inappcloud.com