MTC2018 カンファレンスLPの裏話 〜インフラ編〜 - Mercari Engineering Blog
こんにちは、メルペイのバックエンドエンジニアの @kazegusuri です。 2018年10月4日にMTC (Mercari Tech Conf) 2018 が開催されました。ご来場された皆様、楽しんでいただけたでしょうか？ 今回は皆様が最初に目にしたであろうカンファレンスLPの裏側について紹介したいと思います。 実はこのページはGitHub上でPublicなリポジトリとして公開されています。 気づかれた方もいらっしゃるかもしれませんが、これはイベント後に公開したわけではなく、リポジトリ作成時からずっとPublicな状態で開発を続けていました。 チーム構成 MTC2018では最初からWebでの公開だけではなくカンファレンスアプリを作ろうというのを決めていました。 そのため大きく分けてwebチームとappチームに分けて開発をすすめることになりました。 web/appチームはメルカリグループ
puppeteer + express + mocha で快適 TDD している話 - ジンジャー研究室
TDD という用語を使うとテストおじさんがやってきて、それはそうじゃないとか色々言い出すと思うんだけど、それが趣旨ではないので勘弁して欲しい。予防線ここまで。 Puppeteer でテスト Puppeteer が世間的にも個人的にもブームだ。ヘッドレス Chrome を操ってクローリングしたりスクリーンショットを撮ったり色々出来る。 github.com で、あれこれと遊んでいるうちにテストに使えるんじゃね？ということに気づいたので実践してみたら快適だったという話。ブラウザ操作してテストというのは昔から Selenium というのがあり、こちらはクロスブラウザで出来たりするんだけどまあ大掛かりでだるさを感じてしまう。メリットデメリットの比較はさておき、どうせならナウいやつを使ってみたい。よし使おう。 何をテストするか 普段から画面を見ながら開発しているので、どこに何が表示されているべきとい
npm | the state of javascript frameworks | part 3 | backend frameworks
The State of JavaScript Frameworks, 2017 Laurie Voss, co-founder and COO, npm, Inc. January 3rd, 2018 Part 3: Back-End Frameworks The story on the back end is simple: Express is the overwhelmingly dominant solution for back end services written in JavaScript. The next four biggest frameworks are so small relative to Express that it’s hard to even see them. The other clear pattern here is that Expr
2017-12-19のJS: JavaScript開発者アンケート2017、Reactのインフラ、CQRS/EventSourcing
JSer.info #362 - The State of JavaScript 2017: IntroductionにてJavaScriptを使う開発者向けアンケートの結果が公開されています。 JavaScriptのフロントエンドからバックエンド、ツール、言語、ライブラリ、CSSなど幅広く扱った内容になっています。 またそれらの結果と給料や経験年数などを組み合わせた結果を見れます。 たとえば、#StateOfJS 2017 Results: Front-end Frameworksではフロントエンドのフレームワークとして何を使っているかという質問の結果が掲載されています。 結果としてはReact、何も使ってない、Angularとなっていて、それらのフレームワークをまた使いたいかどうかや組み合わせて使っているのかなどの投票結果が書かれています。 去年の結果もhttp://2016.stat
BFFの設計とflowtype - Qiita
株式会社FOLIOのフロントエンドエンジニアをしています、諸見里です。 この記事はFOLIOアドベントカレンダー7日目の記事です。昨日の記事はバズらせてサーバーを落とすことで有名な弊社CDOの超心に刺さってイヤでも印象に残るプレゼンの方法でした。それほどバズらずサーバーは落ちなかったようです。 会社のアドベントカレンダーということで、今回はFOLIOのBFF(Backend For Frontend)でのflowtypeの活用と、アーキテクチャについて書きます。 BFF & Microservices FOLIOのシステムは、Scalaを中心としたマイクロサービスで構成されています。そして、それらのサービスをクライアント向けに束ねるために、Node.jsで書かれたBFF(Backend For Frontend)を置いています。例えばWebアプリ用のBFFなら、各サービスからデータを集めて
yahoo/fetchrを使う - Qiita
先日参加した、isomorphic tokyo meetupで紹介されていたfetchrが良さそうだったので、使ってみた。 fetchrが解決する課題 React＋Fluxでサーバサイドレンダリング時に、superagentやaxios、isomorphic-fetchなどのIsomorphicなHTTPクライアントを使ってデータをフェッチするが、そのまま使うと下記のような課題にぶつかる。 ブラウザから直接BEのAPIにアクセスできない（またはさせたくない、外部のAPIでキー・シークレットをブラウザ側で持ちたくない）場合、そのAPIとProxyするエントリポイントを作る必要がある。 フェッチ部分のロジックが共有されるので、ブラウザではWeb API経由でフェッチして、サーバサイドレンダリング時は直接DBにクエリを叩きたい、みたいなのを自分で実装すると面倒。 fetchrはBEや外部のAPI
Apps Script による高度な開発プロセス
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
アメブロ2017: Isomorphic Web Appの進化編 | CyberAgent Developers Blog
こんにちは、フロントエンドを中心に開発しています、原 (@herablog)です。 昨年10月にアメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~という記事で、アメブロのJavaベースアプリから、Node.js・Reactベースアプリへのリニューアルについてお伝えしました。今回は、より進化した2017年版のWebアプリケーション開発に向けて、その後おこなわれた改善についてお伝えします。 https化 2016年4月に、ameblo.jpのhttps化をおこないました。セキュリティ観点としては当然のこと、SEO効果やブラウザの新しい機能の利用など、https化はWebアプリケーションのクオリティアップには必須といってよいでしょう。 まず、サブドメイン化されたサブシステムのhttps化をおこない、その後アメブロ本体のドメインをhttps化しました。ht
Node.compareDocumentPositionが素晴らしい - hogehoge @teramako
と呟いていたら、 id:caisui さんが と教えてくれた。 広範囲にイベントを取得して、イベント発生元がどの要素に含まれるかで処理を変えたい時があって、そんな時は親ノードを辿って調べるという面倒なことをしていた。これとはおさらばしたいということで、compareDocumentPositionについて調べてみた。 Node.compareDocumentPosition - MDC Doc Center The return value is a bitmask with the following values: DOCUMENT_POSITION_DISCONNECTED = 0x01; DOCUMENT_POSITION_PRECEDING = 0x02; DOCUMENT_POSITION_FOLLOWING = 0x04; DOCUMENT_POSITION_CONTAINS
GIFアニメーションを再生し終えてから次のGIFを表示するElectronアプリを作っていました - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 作っていました。 khsk/electron-gif-loop: Gifyからgifを取得し、最低1ループはアニメを見せるgifビューワー 備忘録。 特徴 最低1ループはアニメーションを見せる、スライドショー的gifビューワーです。 GIPHY からgifを取得しつづけます。 任意のタグを複数登録することで、好きなジャンルのgifを表示できます。(精度はGIPHYAPIに依存します) 可能な限り、ループの終了直後に次の画像を表示します。 画面のリサイズと移動が可能です。 常に前面表示の切り替えが可能です。 デモ 動機 昔からgifアニメ
リクルートテクノロジーズのフロントエンド開発 2016 - from scratch
前書き このエントリーは Recruit Engineers Advent Calendar の 1日目の記事です。 www.adventar.org リクルートテクノロジーズのフロントエンド開発 リクルートテクノロジーズではいくつもの並行するタスクが走っていて、プラットフォーム基盤と呼ばれる基盤技術開発とインフラソリューションと呼ばれるインフラ開発、後はアプリケーション開発支援などのタスクが存在します。 アプリケーション開発支援の中でもウェブフロントエンド開発は目下のところ重要タスクとされており、色んなやり方をトライアルしています。 基本的には、 React Redux Node.js という組み合わせでフロントエンド開発をしています。 主には以前 ubb.jp というイベントで発表したこの資料に記載されている内容でやっていますが、諸々補足します。 リッチなウェブアプリケーションを作るた
Nodeにおける初のオブジェクトデータベース: Realm Node.js
Realmではこれまでモバイルデベロッパーにフォーカスして Realm Mobile Database をSwift、Objective-C、Java、XamarinとReact Nativeに対して開発し、オープンソースとして提供してきました。本日、完全に新しい挑戦としてRealm Node.jsをリリースします。Nodeにおける初の真のオブジェクトデータベースです。本日から無料で完全にオープンソースとしてリポジトリが公開され、NPMを用いて npm install --save realm を実行するだけで利用できます。 これまで何年もの間、モバイルデベロッパーのみなさまから、サーバーサイドで動作するRealmが欲しいという本当にたくさんのご要望をいただいていました。長い間タスクリストに残ったままで、優先度は高くありませんでした。しかし、その状況は Realm Mobile Platf
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
stream b/w node.js and whatwg // Speaker Deck
Talk about Stream API difference between node.js and whatwg at #tng11 2016/08/08
Node学園 20時限目 アウトラインメモ
Node学園 20時限目に参加したきたのメモ。 「eslintの話」 by @mysticatea スライド: ESLint Past and Future - Google スライド ESLint 12-3% ぐらいのルールを書いた JSHintにプラグイン機能が追加するという話はあったけどならなかった ESLintの特徴 ASTベースでプラグインという特性 (以前書いたプラグインの仕組み: ESLint | JavaScript Plugin Architecture) 開発者が貢献するのが簡単 コントリビューションガイド 開発体制 機能に関しては Reviewer以上 バグに関しては Committer 以上が確認してマージ 隔週の金曜日にリリース ESLint 3.0.0 Stage 4に到達した構文 Auto FixはIDEと連携して選択式の適応へ アグレッシブなFixは同時に適
Object.observe の死 (ECMAScript の提案取り下げ、V8 からも削除予定)
1年前の記事 JavaScript フレームワークがデータバインディングを実現する４通りの手法 では、Object.observe() について次のように説明した。 JavaScript オブジェクトが変更されたときにコールバックを呼んでくれる API データバインディングの実装が簡単になる Google Chrome には実装済み ECMAScript 7 に提案中 提案が通れば MV* フレームワークの実装がシンプルになってハッピー 将来を期待されていた Object.observe() であったが、2015 年 11 月頭、ES Discuss メーリングリストへの An update on Object.observe という投稿で、ECMAScript からの提案が取り下げられて、V8 エンジンからも年内に削除される予定であることが表明された。 Object.observe()
Cluster
Node.js v0.6 の新機能として cluster モジュール が導入されました．cluster モジュールは，HTTP を含めた TCP 接続を複数の子プロセス (ワーカプロセス) で処理することにより，特にマルチコア環境でのスループット (リクエスト／秒) を向上するための機能です． しかし，ドキュメントにはその使い方が書かれているだけで，どのように実現されているかは書かれていないので，ここで簡単に紹介しておきます． Node.js のクラスタ機能は v0.5.10 で突然コマンドラインオプションとして導入されましたが，直後の「東京 Node 学園祭 2011」が行われた頃にはコマンドラインオプションは廃止されて cluster モジュールによって API が提供されるようになり，その翌週の v0.6.0 リリース数時間前にはその API が変更されるというドタバタぶりでした
WHATWG Streams APIについてのメモ - maru source
こんにちは丸山@h13i32maruです。 WHATWG Streams APIを少し触ってみたので、そのメモです。 ドキュメント WHATWG Streams このメモはLast Updated 21 January 2015を元に書いた whatwg/streams サンプルやリファレンス実装などがある このメモはcommit 879902を元に書いた Stream APIがブラウザにやってくる @jxckさんがnodeのStream APIと絡めてWHATWGのStreams APIを紹介している 概念 JavaScriptのプログラム中で処理する(大きめな)データの読み書きを統一的に扱うためのインターフェースをStreams APIとしてWHATWGが策定している。例えばXHRで大きなファイルを読み込んだ時にはすべてのデータを読み込んだあとにコールバックが呼ばれる*1。これだと読み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SLOBSERVER - L'actualité de Second Life
APIファーストのWebフレームワークSynthを巡るコミュニティの困惑
