MANABIYA 2018-03-24 (sat) Webセッション ３時限目の発表内容 https://manabiya.tech

ElectronでAngularの開発は普通のElectronの開発とあまり差がありません｡ https://github.com/maximegris/angular-electron をベースに直接やってもいいですが､自分で@angular/cliでやっても問題ありません。 1. 環境構築 npm install @angular/cli ng new electron-angular cd electron-angular npm install --save-dev electron electron-reload import { app, BrowserWindow, screen } from 'electron'; import * as path from 'path'; let win, serve; const args = process.argv.slice(1)

AngularにWebComponentsがやって来るヤァ!ヤァ!ヤァ!〜@angular/elementsのファーストインプレッション〜JavaScriptAngularWebComponents タイトルは「ビートルズがやって来るヤァ!ヤァ!ヤァ!」のパロディです。 @angular/elementsとは何か？ @angular/elementsは、AngularコンポーネントをWeb Componentsにするためのパッケージです。9/29にPullRequestが起こされ10/28にLGTMが出てlabsブランチに移されました。まだexperimental=実験ステータスのできたてほやほや新機能です。 これは言い訳なんですが、@angular/elementsの方向性もまだ流動的ですし、筆者もまだ全然知識が追いついてません。現状わかる範囲でまとめましたが、ツッコミや訂正ありましたら

私は数年前からReactについて意識しており、実際にReactに関する書物などを購入してHello Worldの実装も行なったことがあるのですが、どうもReactは癖が強い気がしていまして（JSXなど）今までテンプレートエンジンを利用してウェブサイトを作成していた自分には、Reactの素晴らしさがまだ実感できていません。 私がこれらデータバインディング系（またはWebコンポーネント化系？）モジュールに初めて触れたのはKnockout.jsが切っ掛けになるのですが、Knockout.jsを利用することで複雑なDOM操作から解放されたときは本当に感動しました。 しかし、それらのモジュールを使いこなしていく過程でより複雑なことをしようとすると、どう実装すれば良いかわからないことがあり、ドキュメントを何度も読み返して悪戦苦闘することがありました。（Knockout.jsならではの苦闘かもしれません

はじめに Railsにも対応しているJavaScriptのサーバサイドレンダリング用ライブラリairbnb/hypernovaが、airbnbからリリースされました。 この記事では、シンプルなRailsアプリを構築し、これまたシンプルなReactコンポーネントをサーバサイドレンダリングで表示するまでのチュートリアルを解説します。 ReactによるSPA（シングルページアプリケーション）も増え、Google等の検索エンジンでもある程度はページ内容を解釈してくれるらしいですが、サーバ側でHTMLをレンダリングして出力するサーバサイドレンダリングを利用すると、より正しくページ内容を解釈してもらえます。 Hypernovaとは A service for server-side rendering your JavaScript views Hypernovaは、JavaScriptコンポーネント

対象 Rails だけどSPAっぽく画面遷移したい SEO担保しないといけない 新規設計の参考 jQuery まみれの状態からこれと同等のことをするのは、不可能じゃないけど難しいです。 単にどう導入するか知りたいだけなら https://github.com/mizchi-sandbox/packnova/commit/447a91ea3a706c0bb0aac8570d1fbbaf6c9710f1 のコミットで 目指したモノ 最小限の設定で Rails エンジニアでもメンテ出来るSSR/SPAアプリの土台。 ただし土台をハックし始めるとその限りではない。。 スタック webpacker でコンパイル 画面遷移は hypernova-react/turbolinks で自動再マウント ルーティングはRails側に寄せてます。なので react-router は入ってないです。 入れる選択肢

Kaigi on Rails 2023 - ActiveSupport::CurrentAttributes: すっごく便利なのに嫌われ者？！

Deciding on a JavaScript framework for your web application can be overwhelming. Angular and React are very popular these days, and there is an upstart which has been getting a lot of traction lately: VueJS. What’s more, these are just a few of the new kids on the block. Javascripts in 2017 — things aren’t easy these days!So, how are we supposed to decide? A pros-and-cons list never hurts. We’ll d

AngularとEelctronやIonicで挑戦した
デスクトップ・モバイルアプリ開発。 2017/06/17(土)にng-japan 2017で発表したICS池田さんのセッションのツイートをまとめました。

待望されたYarnサポートの入ったRails5.1が2017年4月にリリースされました。 Ruby on Rails 5.1 Release Notes — Ruby on Rails Guides 他にもjQueryがデフォルトdependencyから外されたり、Optionalでwebpackサポートが入ったりしており、Railsのフロントエンドは大きな転換点を迎えたと言ってよいでしょう。本エントリではRailsのフロントエンド技術の今を振り返り、今後どうなっていくかをまとめてみたいと思います。 DisられてきたRailsフロントエンド Railsのフロントエンド技術スタックは、フロントエンドを専業とするエンジニアにDisられるものでした。具体的には下記の技術要素です。 jQuery CoffeeScript Assets Pipeline (sprockets) gemのエコシステム

こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ

Rails5.1が今betaで出ていますね。中でも目玉はwebpacker.gemによるモダンなフロントエンド開発がRailsに導入されることでしょう。 今までのRailsのasset pipelineとは別に、yarnによって依存性を管理しwebpackで結合する独立したjsのビルドシステムがサポートされます。 これによって、以下のような従来のasset pipelineでは解決がむずかしかった問題への解が示されました。 coffee scriptへの依存 npmによる依存性、バージョン管理が難しい javascriptのライブラリが野良gem化されてupdateされない問題 webpacker.gemはyarn/webpackの薄いwrapperとなっていて、加えて幾つかのrakeタスクを追加することでフロントエンド開発をサポートします。 具体的には以下のような機能が提供されます。 y

こんにちは。マーケティングプロダクト開発部の長田です。 この記事では、私が現在進めているプロジェクトで、Webpackerを使ったJavaScriptのモジュール管理を導入したので、それについて紹介したいと思います。 Webpackerとは Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要な一連の流れを提供してくれる、Rails organizationで開発されているgemです。 これまで、Rails上でJavaScriptのパッケージをどのように管理するか、また、モジュール依存をどのように解決するかについて、多くの選択肢があり、それらをどう組み合わせて使うのかについて悩まされてきました。 このブログでも過去に何度か記事が投稿されており、その中でも複数の選択肢が上げられています。 webpackを使った Rails上でのReact開発

本当は1ヶ月前に下書きを書いた記事なのですが、 忙しくて見直す時間がなく、だいぶ遅くなってしまいました(´･ω･`) その間にバグfixを進め、一応安定動作していますし、 それもふまえた内容に書き換えていく方向で・・・ 相変わらずメンテと拡張を続けている 「チェンクロパーティーシミュレーター」（以下「ccpts」）ですが、 先日Reactでほぼ全体を書き換えました(`･ω･´) ccpts.parrot-studio.com github.com ちょうど1年ほど前、私がReactを初めて意識した際に、 一度やろうとしたことはあるのですが、 いろいろな理由*1があって諦めてました しかし、昨年から仕事でNode.jsを扱うように*2なり、 先日はccptsのロジックをFRPで整理するのに成功したりと、 今ならいけるんじゃないか・・・と思い、今回試してみたわけです React（+flux）に

去年の夏、私たちは大量のコードベース（18,000行以上の コード行数 ）をJavaScriptからTypeScriptへと変更しました。この移行作業を通じて、両者の相違点や類似点について大いに学び、TypeScriptの優れたユースケースや、TypeScriptを使うべきではないケースなどについて考えてみました。 型システムとは補助輪のようなものです。転倒防止してくれる代わりに、遅くなり、操作性が制限されます。 TypeScriptのユースケース コードサイズ ：ソースコードが膨大である場合、また複数の人がプロジェクトに従事している場合、型システムは明らかなエラーを防ぐのに役立ちます。 特に SPA の場合は当てはまります。誰かが変更したコードが他の人のコードを破損させてしまう可能性があるなら、何らかの安全機構を持つ方がいいでしょう。TypeScriptの トランスパイラ は明白な誤りを