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
Claude Agent SDK を使ってみよう
hyshu
0
1.2k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
2.1k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
920
CSC509 Lecture 04
javiergs
PRO
0
300
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6.4k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
320
Le côté obscur des IA génératives
pascallemerrer
0
150
Software Architecture
hschwentner
6
2.3k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
15
6k
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
Webサーバーサイド言語としてのRustについて
kouyuume
0
330
Featured
See All Featured
Fireside Chat
paigeccino
40
3.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Six Lessons from altMBA
skipperchong
29
4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Writing Fast Ruby
sferik
629
62k
Facilitating Awesome Meetings
lara
56
6.6k
Bash Introduction
62gerente
615
210k
Context Engineering - Making Every Token Count
addyosmani
7
270
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