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
Claude Agent SDK を使ってみよう
Avatar for Hayami Shuhei hyshu
0
1.2k
Writing Better Go: Lessons from 10 Code Reviews
Avatar for Konrad Reiche konradreiche
0
2.1k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
Avatar for Oliver Drotbohm olivergierke
3
920
CSC509 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
(Extension DC 2025) Actor境界を越える技術
Avatar for Himeshi teamhimeh
1
260
ALL CODE BASE ARE BELONG TO STUDY
Avatar for uzulla uzulla
25
6.4k
組込みだけじゃない！TinyGo で始める無料クラウド開発入門
Avatar for Kotaro Otaka otakakot
1
320
Le côté obscur des IA génératives
Avatar for Pascal Le Merrer pascallemerrer
0
150
Software Architecture
Avatar for Henning Schwentner hschwentner
6
2.3k
実践Claude Code：20の失敗から学ぶAIペアプログラミング
Avatar for 武田隆志 takedatakashi
15
6k
Devvox Belgium - Agentic AI Patterns
Avatar for Kevin Dubois kdubois
1
130
Webサーバーサイド言語としてのRustについて
Avatar for kaza kouyuume
0
330

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
40
3.7k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
238
140k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
49
51k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
56
6.6k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
7
270

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