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
84

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
72
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
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
130
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
230
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
390
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
220
Oxlint JS plugins
Avatar for kazupon kazupon
1
950
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
280

Featured

See All Featured
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
65
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
61
HDC tutorial
Avatar for Michiel Stock michielstock
1
380
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
53
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k

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