ReactでSSR(サーバサイドレンダリング)している話 - Qiita
この記事はAkatsuki Advent Calendar 2016の7日目の記事です。 こんにちは、 @shimpeiws です。 アカツキのライブエクスペリエンス事業部で、Webエンジニアをしています。 今日は最近開発しているプロダクト、Wowful(現在β公開中)のアーキテクチャについて書きます。 ※ 今回の記事は以前発表した 2つのスライドの増補改訂版のポジションです。 サーバサイドレンダリング、してますか? BFFにかける期待 Wowfulのサービス面の特徴と技術的な要求 Wowfulはサービスとして以下のような特徴を持っており、 これらの要求を解決できる技術・アーキテクチャの選定を行う必要がありました。 まずはWeb主導で展開する BtoCのサービス 利用ユーザはスマートフォンが多数になる予想 検索からの流入を主な導線として想定 トラフィックが多いページのユーザインタラクション
history pushState and scroll position
I am trying to retrieve the scroll position when a user navigates back in the browser history using HTML5 popstate handler. Here is what I have: $(document).ready(function () { $(window).on('popstate', PopStateHandler); $('#link').click(function (e) { var stateData = { path: window.location.href, scrollTop: $(window).scrollTop() }; window.history.pushState(stateData, 'title', 'page2.html'); e.prev
おっさんES6/ES2015,React.jsを学ぶ
おっさんES6/ES2015,React.jsを学ぶ 2016JavaScript入門 2016/11/21 @BizReach D3イベント登壇資料 最近のJavaScript動向 ・試験に出るJavaScript21年の歴史 ES6/ES2015を学ぶ ・ES6/ES2015概要 ・ES5を振り返る ・altjsの意義 Reactを学ぶ ・DOCを読む ・Tutorialをやる まとめ ・今回の学習を通じて感じたこと
GitHub - ReactTraining/react-router-addons-controlled: Controlled Router components for React Router
THIS IS EXPERIMENTAL SO IF YOU USE IT AND FIND PROBLEMS THEY ARE YOUR PROBLEMS THAT YOU MUST SOLVE, MAYBE EVEN ALL BY YOURSELF. react-router-addons-controlled attempts to treat <Router> like a controlled component (think <input value onChange/> ). Unfortunately, it's not that simple. You can't actually control the browser history, so it's more a two-way data binding situation. However, in the majo
serverless + webpack + babel で AWS Lambda をナウく書く - scramble cadenza
イントロ 最近 AWS Lamdba を仕事で触っています。 serverless やら Apex なり色々あるわけですが、沢山ありすぎてよくわかりません。 今までは Apex の手軽さに甘えていましたが、そろそろ serverless が本気を出してきたという噂を聞き、serverless を使い始めています。 どうせ serverless を使うなら、もう全部使い倒してやろうということで、babel も意識高く使っていきたいわけです。 この記事では serverless + babel を使うところまでをまとめました。 環境 serverless@1.1.0 serverless-webpack@1.0.0-rc.2 webpack@1.13.3 serverless まずは雛形作成 # template 指定は必須 # `sls` は `serverless` コマンドの alias
Why we chose Vue.js
I had a great conversation with an interviewee a few weeks ago about how one should go about choosing a JavaScript framework. He pointed out that when a major software company releases their secret sauce, there is going to be hype. Devs think to themselves, "That company writes JS differently than me, and they are prominent and successful. Is their way of writing JS better than mine? And therefore
Reactの最新動向とベストプラクティス ── HTML5 Conference 2016セッションレポート
Reactの最新動向とベストプラクティス ── HTML5 Conference 2016セッションレポート 小林徹 2016年9月3日に東京電機大学で開催された「HTML5 Conference 2016」のセッションを特集する第二弾は筆者である私、小林徹が登壇した「 Reactの最新動向とベストプラクティス 」の内容を解説します。 Reactの現状 Reactは、2013年にFacebookが公開した、Viewを作るためのJavaScriptのライブラリーです。 https://facebook.github.io/react/ 現在のバージョンはv15.3.2です。 v1.0.0からv14.0.0までのバージョンはありません。 「すでに安定していてプロダクションでも利用できる」ことや「セマンティック・バージョニング（パッチ.マイナー.メジャー）に準拠している」ことを示すために、v0.
Ramda Documentation
Ramda A practical functional library for JavaScript programmers. Why Ramda? There are already several excellent libraries with a functional flavor. Typically, they are meant to be general-purpose toolkits, suitable for working in multiple paradigms. Ramda has a more focused goal. We wanted a library designed specifically for a functional programming style, one that makes it easy to create function
Yarn: A new package manager for JavaScript
In the JavaScript community, engineers share hundreds of thousands of pieces of code so we can avoid rewriting basic components, libraries, or frameworks of our own. Each piece of code may in turn depend on other pieces of code, and these dependencies are managed by package managers. The most popular JavaScript package manager is the npm client, which provides access to more than 300,000 packages
RxJS(5.x)で行うテストファーストな機能開発｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
小飼です。 『The Next Great Burger』にハマっています。 RxJS、使っていますか？ 弊社では現在開発しているアプリケーションから、本格的にRxJSを導入して使い込んでいっています。 イベントを配列のように操作できるという高度な抽象化の恩恵で、非常にリーダブルかつ簡潔に機能実装が出来るところが非常に良いですね。 学び始めた当初はReactive Programming的な考え方で実装を発想するということができず、非常に難解なイメージを持っていましたが、 半年くらい置いて改めて使ってみたところ、非常に使いやすいライブラリであるというイメージにガラッと変わりました。 これはRPっぽい発想の転換ができたことと併せて、TypeScriptでRxJSを用いることで、静的型解析の恩恵を受ける事ができた事も大きいと思っています。 (少なくともAPIの多さは問題にならなくなりました)
Introduction | Learn RxJS
Clear examples, explanations, and resources for RxJS. By @btroncone RxJS is one of the hottest libraries in web development today. Offering a powerful, functional approach for dealing with events and with integration points into a growing number of frameworks, libraries, and utilities, the case for learning Rx has never been more appealing. Couple this with the ability to utilize your knowledge ac
Improve Redux with redux-observable
Redux is a great way to manage your state in any React application. To learn the basics of Redux, visit the Redux website . A very simple Redux application looks something like this Reducers ──────────────────────────▶ React (View) ▲ │ │ │ │ │ │ │ │ ▼ └─────────────────────────────── Actions (onClick, onSumbit, etc.) This setup works for really simple applications, but fails to provide the ability
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vim で jsx を "綺麗に" ハイライトする - Qiita
turbo.js - Easy GPGPU
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
How it feels to learn JavaScript in 2016 | HackerNoon
https://megaboilerplate.com/
Redirecting to new RxJS docs...
20160930 フロントエンド高速化 業務編 (社内勉強会)
[archived] メンテナブルな React Component を目指すための小技集 - Qiita![[archived] メンテナブルな React Component を目指すための小技集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/53aad98d3dfe5b63766a927e2734b0d273c84ed6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNzMwNyUyRnByb2ZpbGUtaW1hZ2VzJTJGMTU3MDI3NjUyNT9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmYmc9RkZGRkZGJmZtPXBuZzMyJnM9YTkwNjQ1YjE1NWFiNjlhNTI3YjI5NmYyMjUyMjhjNmQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D7ff96656d4ab6eca3700fb115f167149%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCYXJjaGl2ZWQlNUQlMjAlRTMlODMlQTElRTMlODMlQjMlRTMlODMlODYlRTMlODMlOEElRTMlODMlOTYlRTMlODMlQUIlRTMlODElQUElMjBSZWFjdCUyMENvbXBvbmVudCUyMCVFMyU4MiU5MiVFNyU5QiVBRSVFNiU4QyU4NyVFMyU4MSU5OSVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFNSVCMCU4RiVFNiU4QSU4MCVFOSU5QiU4NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWQxZTUxYzRmZDljNDY2OWM3MGI2MmVkNzZmNDYyM2Vh%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0ZXJyaWVyc2NyaXB0JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZjVmNWI4NjYxNTcyODNmNzFiY2YzMWU5MTkyNWMzMzM%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dfcf2f06936d2cbe1bee08c78d26872ee)
