Repro Tech : Frontend Reliability support NAVITIMEに参加してきました。 repro-tech.connpass.com フロントエンドのreliabilityがテーマということでリアルな開発現場の苦労話を多く聞けました Reproのイベントでしたが半分は豪華なゲストスピーカーということでバランス良かったです タイトル 発表者 E2Eテストを継続するために brn ReproのWeb SDK開発を支える技術 cheezenaan 続・Vue.jsによる大規模開発 kazupon フロントエンド開発の土台としてのチーム作り 渡部啓太 クックパッドにおけるwebフロントエンドの改善 @hokaccha フロントエンドと向き合う @treby E2Eテストを継続するために brnさん(Cyberagent) E2Eテスト ユーザと同様に操作して機能
Frontend Conference Fukuoka 2018で発表した資料です。 https://frontend-conf.fukuoka.jp/ 各リンク先を確認する場合は、以下のpdfを参照ください http://tonkotsuboy.github.io/slides/181204_frontend_fukuoka/181208_frontendconffukuoka.pdf はてなブックマーク http://b.hatena.ne.jp/entry/s/speakerdeck.com/tonkotsuboy_com/2019nian-madenijian-zhi-siteokitai-cssjavascriptfalseshou-fa ご意見やご感想はTwitter ( https://twitter.com/tonkotsuboy_com ) までお寄せください。 #fec
Mercari Advent Calendar 2018 の6日目はフロントエンドチームの @vwxyutarooo がお送りします。 このタイトルが言いたくて Micro Frontends の記事を書きました。皆さんは Micro Frontends という言葉を聞いたことがあるでしょうか? 私は数ヶ月前まで全く知りませんでした。メルカリのフロントエンドチームにて Micro Frontends に関して考える機会があったので、Micro Frontends とはなんなのか。何をどのように解決しようとしているのかという内容を紹介します。 Micro Frontends とは Micro Frontends という考え方は ThoughtWorks Technology Radar にて2016年に初めて登場したと言われています。日本語で言うときは複数形は無視して "マイクロフロントエン
HTML5カンファレンス2018で登壇した内容です。
はじめに 少し前にフロントエンドのjs向けvalidatorフレームワークの favalid というものを作ったので、その紹介記事を書きます。 favalidの特徴 フロントエンドというかjs向けvalidatorといえば joi や yup 、v8nといったようなライブラリがありますが、それらに比べると機能を大幅に削り、とにかく軽量なのと関数型ライクなAPIがfavalidの特徴です。デフォルトのバリデーションメッセージすら入ってないので自分で定義しないとダメです。 ユースケースやコンフィグによりますが、最小構成でwebpackでbundleすると、1kbくらい。機能を色々盛り込んでも~10kbくらいになるかと思います。gzipを効かせれば容量は更に削減されるかと思います。 使い方 ここからは favalid の使い方を説明します。 インストール 普通に npm ないしは yarn で入
HTML5 Conference 11/25
まえがき 最近社内でLT大会がありまして、Angular2について発表したのですが(正式リリース直前でしたが)、結構内容的には、React vs Angular2みたいな内容になってたので、『(私が)ReactとAngular2の選択で迷ったときに考えたいこと』としてちょっと記事にしてみました。 ※1 この記事はあくまで両者を触ってみた『個人的な感想』になりますのであしからず。 ※2 そして、この記事は2016-09-18の時点での内容になります。 Reactはライブラリ、Angularはフレームワーク Reactが出始めた頃にはよく比較されることの多かったAngularですが、それは両者が似たような時期に盛り上がってきており、それでいてDOM周りの問題解決で謳っている機能がそれぞれちょっとずつちがっていたからかなと思っています。(それぞれDOMの構築とデータバインディングについての機能を
技術の流れが速い中、どうやって技術選定をしている? 案件のスピード感や企業規模によって異なる技術選定基準 小林:フロントエンドにはさまざまなトピックがありますが、今回はJavaScriptを中心にディスカッションしていきたいと思っていますので、よろしくお願いします。 まずは現在の技術の流れが速い中で、みなさんがどのように技術選定をしているのかというテーマですが、簡単に今までどのような技術を使ってきたのか、その選定基準などを教えていただければと思います。 林:管理画面系のフラットアプリケーションの構築にAngularを採用しました。いろいろな選択肢がある状態だったのですが、迷っているだけの時間がなかったことと、Angularに詳しいメンバーが多かったという要素が採用の大きな理由です。 古川:僕の場合は3年前に開発を始めた案件でReactを採用しましたが、完全にタイミングでした。 まず、リクル
同時に、redux-protoはリクルートテクノロジーズならではの大規模Web開発に必要な機能を盛り込んだ高機能なフレームワークでもあります。主なもので以下のような機能があります。 サーバサイドでHTMLを描画するためのSSR機能(Server Side Rendering) マイクロサービス化されたAPIを組み合わせて利用するためのBFFサーバ機能(Backend For Frontend) Atomicデザインを採用し、表示(Presentation)とロジック(Container)を切り分けるデザインパターンの徹底 titleタグ、metaタグ等のheadタグ要素の動的な変更のサポート URLに対応したルーティング、データフェッチとルーティングおよび描画の同期を行う機能 戻る操作時に以前の状態とスクロール位置を復帰する機能 ルーティングに応じたwebpackのコードスプリット、および
2018-09-05にMercari社のオフィスで開催されたHTML5とか勉強会で 「フロントエンド刷新中のnoteの開発環境について」 というタイトルで発表させて頂きました。 pixiv社の川田さん(@_furoshiki)よりお声がけ頂き登壇する運びになりました。機会を頂き感謝です、ありがとうございました! スライド内の紹介コンテンツ・noteのフロントエンドをNuxt.jsへ刷新します ・テキストのサンプル(Nuxt.jsのデモページ) ・Nuxt.js ・ESLint ・JavaScript Standard Style ・Prettier ・「結局Nuxt.jsって何がいいの?」に対する回答 ・Atomic Design ~堅牢で使いやすいUIを効率良く設計する ・Vue.js からみた AtomicDesign ・note engineer meetup 雑談当日は参加者100
フロントエンドはツールチェイン多くて大変ですね。何から初めていいかわからないと思います。 というわけで、 babel や webpack, というかもはや node の インストールすら不要でフロントエンドを始めることができるプロジェクトを作りました。 git clone git@github.com:mizchi/frontend-starter.git --depth 1 --single-branch master cd frontend-starter ruby -run -e httpd . -p 8000 # 好きな静的サーバー This is App を何か書き換えてリロードしてみてください。適用されるはずです。 最後に一つ注意。裏側はとても富豪的に動いているので、本番環境では使わないでください ここで動くコードはちょっと微調整を加えると webpack でビルドできます。
他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 「テンプレートエンジン」として捉えて、シンタックスを攻撃するのをやめよう ライブラリとしてのReactはとても簡単 Reactの思想を理解するのはチョットムズカシイ 環境構築が難しい JavaScriptそのものが難しい GUIが難しい jQuery時代からのパラダイムシフト フレームワーク関係者の情報量が多い SPAはとりわけ難しい まとめ ずっと感じてたもやもやを書き連ねたら長くなってしまったが、ぼんやりとReactとかなんか難しそうだしめんどくさいから新規案件だけどjQueryでやろっかなどうしよっかなーと迷っている人の指針になってくれればうれしい。 他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 出た時から延々と言われ続けているものの、やっぱり今でもjQueryとRe
日米通算1億ダウンロードで日本最大フリマアプリ「メルカリ」。今回はメルカリの小嶋仁司さん、坂本結衣さんにメルカリのフロントエンドエンジニアたちがどんな技術や体制で開発しているのか、HTML5 Experts.jp白石俊平編集長が直撃インタビューしてきました! メルカリで重要な役割を果たしているWebView 白石:お二人は、メルカリでどんなお仕事をされているんですか? 小嶋:私は2015年10月に入社して、アプリケーション内のWebViewページの開発を担当してきました。具体的には大規模なトラフィックがある取引画面や、配送サービス「メルカリ便」に新たな運送会社を追加したり、「大型らくらくメルカリ便」の配送機能を拡大したり、集荷サービスなどの開発も行いました。 白石:ビジネス的に重要な部分を作っていらしたんですね。 小嶋:技術としてはいわゆるHTML5、CSS3、JavaScriptを使った
先日Launching the Front-End Tooling Survey 2018というフロントエンドツールのアンケート調査を和訳しましたが、その結果が発表されました。 以下はThe Front-End Tooling Survey 2018 - Resultsの日本語訳です。 The Front-End Tooling Survey 2018 - Results 今年3月のFront-End Tooling Surveyに、5097人のフロントエンド開発者から回答をいただきました。 参加された皆さんには感謝致します。 毎回、調査の目標は単純です。 フロントエンドエンジニアが現在仕事で使用しているツールについて光を当てたいのです。 どのようなツールが使われているのか、自分の知識や経験だけで判断してしまうのは早計です。 以下の結果は、フロントエンドツールの現在の動向を把握するのに役立
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの?」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ(Gentleさ)を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く