Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Pragmatic Web Components
Search
Nicolas Mérouze
February 04, 2014
Programming
1
83
Pragmatic Web Components
Pragmatic RESTful APIs mixed with Web Components for a flexible frontend development.
Nicolas Mérouze
February 04, 2014
Tweet
Share
More Decks by Nicolas Mérouze
See All by Nicolas Mérouze
Table-Driven Testing
nmerouze
0
71
Make Hypermedia APIs in Ruby
nmerouze
4
440
Netty with JRuby (French)
nmerouze
2
240
Other Decks in Programming
See All in Programming
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
100
Swift Updates - Learn Languages 2025
koher
2
420
機能追加とリーダー業務の類似性
rinchoku
2
850
AI時代のUIはどこへ行く?
yusukebe
13
7.6k
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.6k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
190
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
300
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
140
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
AIコーディングAgentとの向き合い方
eycjur
0
250
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
RailsConf 2023
tenderlove
30
1.2k
Balancing Empowerment & Direction
lara
3
610
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Code Review Best Practice
trishagee
70
19k
Designing for humans not robots
tammielis
253
25k
A designer walks into a library…
pauljervisheath
207
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Transcript
Pragmatic Web Components
Web Component ?
Make your own HTML elements
Reuse code
Pragmatic ?
Hypermedia/Pragmatic APIs
Let the API do the work
Example: Pagination
Rails Way
gem 'kaminari'
class PostsController < ApplicationController def index @posts = Post.page(params[:page]) end
end
<%= @posts.total_count %> résultats <%= paginate @posts %>
30 résultats < Prev Next >
API + React.js
gem 'active_model_serializers'
class PostSerializer < ActiveModel::Serializer attributes :id, :title, :body end
{ "posts": [{ "id": "1", "title": "foobar", "body": "such foobar"
}] }
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
{ "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" }] }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pragmatic Web Components</title>
</head> <body> <div id="pagination"></div> </body> </html>
<!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>
<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>
<script type="text/jsx"> /** @jsx React.DOM */ var Paginaton = React.createClass({
getInitialState: function() { return { totalCount: 0, next: null, prev: null }; }, // render }); </script>
<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>
30 résultats < Prev Next >
More features: link component, display posts
Apply everywhere
Forms (Validations, Errors, Search)
Breadcrumbs, Flashes, Tabs, Tables
Web Components standard http://w3.org/TR/components-intro
React.js http://facebook.github.io/react
x-tags http://x-tags.org
polymer http://polymer-project.org
Ember.js http://ember.js
What we saw today?
Web Components are simple and usable today
More information in your API == less code for the
frontend
Rails is great for APIs with ActiveModel::Serializers
Nicolas Mérouze http://merouze.me
In-App Cloud http://inappcloud.com