タグ

JavaScriptに関するYassLabのブックマーク (51)

  • Rails is Good Enough

    The first time I watched the infamous “build a blog in 15 mins” video, Dreamweaver was a thing, Flash was owned by Macromedia, and Twitter did not exist. 20 years later, Rails is alive and well. While it has never been the the most popular kid on the block by any means, it remains widely used by bootstrapped founders, large tech companies and everyone in between. Learning programming after 40 with

    Rails is Good Enough
    YassLab
    YassLab 2024/08/04
    'the right way to do important things like auth, and the not-so-important ones like naming conventions. I like not having to think about any of that, so I can focus on building a business and marketing. / “the longer a technology has been around, the more likely it is to continue being around.”'
  • Rails 7のHotwireを簡単に理解する

    GMOアドマーケティングの吉岡です。 今回の記事ではRails 7で追加されたHotwireという技術について、何が良いのか?どんなことができるのか?を話したいと思います。 Hotwireとは? 大量のJavaScriptを使わずに、モダンなWebアプリケーションを作るためのアプローチ JSONではなくHTMLベース サーバーサイドでHTMLを生成し、WebSocketでWebブラウザへ送信 構成する主な要素 Turbo Stimulus Hotwireを使うと何が良いのか? Rails6以前の環境 最新バージョンのjs(ES6)を使いたい →主要なブラウザが対応していないため、ブラウザで動作するES5にトランスパイルする必要がある そのために必要なパッケージとその役割 node.js ES6のjsをサーバー側で解釈するために必要 ES6のjsをES5にトランスパイルするため、node.j

    Rails 7のHotwireを簡単に理解する
    YassLab
    YassLab 2024/07/31
    "Hotwireを使うことで、依存関係の問題改善やjsのコード削減、SPAやWebsocketを使った開発などがかなりやりやすくなった / 多くの新しい技術が使われているので初めは抵抗あるかも / 全体像を理解して必要に応じて使っていく"
  • Hotwire for Frontend devs

    HotwireNext.jsをちゃんと見て比較しよう#サイトでは、React/Next.jsに詳しいフロントエンドエンジニアを対象に、実際に動くコードと実際に動くデモを体感しながら HotwireReact/Next.jsを比較します。 各技術でのUIの作り方を伝えるだけでなく、さまざまな状況での動きを確認していただくために、仕組みや限界も紹介します。そのため、かなり細部の議論もしています。 HotwireでもNext.jsと同等か、それ以上のUI/UXが実現できます。「Hotwireは簡単だけど、React/Next.jsの方が優れたUI/UXが作れる」というのは、かなり特殊なものでない限りは誤解ですHotwireはバックエンド非依存です。Rails, Laravel, Django, Go, Nodeでも関係なく動きます。実際、サイトのHotwireコードはNext.js AP

    YassLab
    YassLab 2024/07/21
    “バックエンドに非依存で、Rails, Laravel, Django, Expressでも関係なく動きます/ 本サイトでは実際に動作するサイトでUXを比較し、またソースコードを確認しながら、HotwireとReact/Next.jsを比較”
  • Rails: HotwireとSPAを比較するなら実装コストの違いに注意(翻訳)|TechRacho by BPS株式会社

    概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The popover drama 原文公開日: 2024/06/02 原著者: Jorge Manrubia 日語タイトルは内容に即したものにしました。 インターネット接続が遅い環境でHEYカレンダーのポップオーバーの読み込みが遅くなる様子が以下でツイートされたことがきっかけで、ポップオーバーのドラマが幕を開けました。その後、無慈悲で辛辣な書き込みやプロの荒らしの出現など、最もSNSらしい形で議論がヒートアップしました。 If you want to know why an app *needs* JavaScript on the client and can’t just do it all on the server, just look at Hey or any other Hotwrite app pic.twit

    Rails: HotwireとSPAを比較するなら実装コストの違いに注意(翻訳)|TechRacho by BPS株式会社
    YassLab
    YassLab 2024/07/17
    “SPAは潜在的に優れた応答性を提供しますが、途方もなく高コストです。ここ数年、SPAがらみの恐ろしい話が原因でプロダクトが失敗したという話を数え切れないほど耳にしています。現実世界ではコスパがすべてである”
  • 2024年のRailsと自由について考える

    えにしテック15周年記念カンファレンスの発表資料です。 https://enishi-tech-15th-anniv-conf.peatix.com/ 資料中で参照しているURLは以下です: https://github.com/rails/rails/milestone/87 https:…

    2024年のRailsと自由について考える
  • デジタル庁でjQueryが何をしているのか - laiso

    TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か?」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて

    デジタル庁でjQueryが何をしているのか - laiso
    YassLab
    YassLab 2024/06/02
    "「jQueryのAPIを直接使っていない」という事実が今回の記事の重要な点 / サイトのフロントエンドはVanilla JavaScriptでなるべく実装されていることが読み取れる / Drupal.org のチケットではcoreからjQueryを削除しようという議論"
  • Recoilは状態管理の選択肢ではなくなってしまった

    TL;DR Recoilはもうメンテナンスされていない。理由は不明だが、このプロジェクトは死んでしまった。 メンテナンスされていないライブラリの使用はやめよう、別の選択肢を選ぼう Recoil Meta社が新規に作成した状態管理ライブラリです。この記事はRecoilの解説記事ではないので詳細は省きますが、大変な期待を抱くには十分なほど魅力的なパッケージでした。 ですが Recoilの現在のリポジトリを見ればわかると思いますが、半年以上前に更新が止まっています。 おそらく、recoilプロジェクトは凍結されました。 つまり、もう更新は期待できないということです。 どうしてこのような状況になったのか どこかの会社が所有しているOSSプロジェクトが凍結される理由は、ビジネス的な問題か、主要コントリビューターが会社を去った場合に起きると考えられます。そして、Metaは規模にかかわらずここ最近ニュー

    Recoilは状態管理の選択肢ではなくなってしまった
    YassLab
    YassLab 2024/05/09
    "会社が所有しているOSSプロジェクトが凍結される理由は, ビジネス的な問題か主要コントリビューターが会社を去った場合に起きる / どれが原因なのかは重要ではありません. 肝心なのはプロジェクトが止まったということ"
  • https://twitter.com/mametter/status/1784777794683371927

    YassLab
    YassLab 2024/04/29
    “ライブラリが non-async でコールバックしてくる関数の中で await しないといけなくなる事故に遭うたび、JS の async/await は史上最大の言語設計ミスだという確信が強まっていく”
  • Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた

    はじめに 記事では環境構築について取り扱いません。 詳細につきましてはリポジトリを参照してください。 Railsフロントエンド開発でつらいところ Railsフロントエンド開発する場合に、よく使う部品はPartialなどで共通化しますよね? 小規模であればPartialだけで十分なのですが、コードベースが成長したり、複雑なユースケースを満たすようになると以下のような課題が生まれてきます。 1. データフローを把握しづらい PartialはControllerで定義したインスタンス変数を参照できるため、以下のようにデータフローが複雑になりがちです。 Partialに値を受け渡すときにlocalsでの受け渡しを必須にすれば解消できますが、曖昧な方針でPartialを実装しているとカオスになります。 2. JavaScriptとViewの依存関係が曖昧で保守しづらい View単位でJavaS

    Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた
    YassLab
    YassLab 2024/04/27
    "JavaScriptの動作をテストするための方法も用意されており、コンポーネント単位でのユニットテストを少ないコストで実装できる / ViewComponentのプレビュー機能とcapybaraのsystem specを組み合わせることで、簡単に実装できます"
  • Latest topics > JS開発のつらみ - outsider reflex

    Latest topics > JS開発のつらみ 宣伝。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行まんがでわかるLinux シス管系女子の試し読みが可能! « 「まんがでわかるLinux シス管系女子」から「ITエンジニア1年生のための まんがでわかるLinux」への改題の意図 Main 理解の不可能性と断絶について » JS開発のつらみ - Nov 20, 2023 JavaScript界隈はソフトウェアのトレンドの移り変わり・流行り廃りが激しい、とはよく聞く。 「だから辛い」とはどういうことなのか、について考えたことのあれこれをXに垂れ流したのを、再編集してまとめた。 流行り廃りの何が辛いのか きっとすでに誰か偉い人も言ってそうだけど、今のWeb技術、特にJavaScriptのつらみは、「プロダクトやサ

    YassLab
    YassLab 2024/02/19
    “JavaScriptのつらみは、「プロダクトやサービスの寿命」より「フレームワークやツールチェインの寿命」の方が短くなりがちにも関わらず、その事がプロダクト開発時の前提になってない”
  • From Next.js to Rails then Elixir: My journey through React.js burnout

    DEV Community Follow A space to discuss and keep up software development and manage your software career Future Follow News and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more.

    From Next.js to Rails then Elixir: My journey through React.js burnout
    YassLab
    YassLab 2024/01/23
    "huge amount of complexity: Multiple separate repos, thousands of libraries and frameworks to achieve simple things, GraphQL, microservices, serverless, static site generation, incremental static regeneration, partial hydration, redux, redux-thunk, babel, webpack, react server components, ... etc."
  • 2023 年の Prettier 振り返り

    2023 年の Prettier の活動を振り返ります。 Prettier とは Prettier は JavaScript で書かれたコードフォーマッタです。設定可能な項目が少ないいわゆる opinionated なコードフォーマッタです。JavaScriptTypeScript だけではなく、HTMLCSSGraphQL などもサポートしています。 リリース 2023 年は、メジャーバージョンのリリースが 1 回、マイナーバージョンのリリースが 1 回でした。これまでは 3 ヶ月に 1 回程度マイナーバージョンをリリースしていたので、頻度は少し下がっています。 ですが、メジャーバージョンである 3.0 をリリースできたことと、これまでよりもカジュアルにパッチバージョンをリリースするようになったことを考えると、開発自体が停滞しているわけではないと思っています。 「カジュアル

    2023 年の Prettier 振り返り
    YassLab
    YassLab 2023/12/27
    "「PrettierをRustで書き直したやつに$20kあげちゃうキャンペーン」が開催 / 今回 Biome が Prettier との互換性と資金とコントリビュータを手に入れたことで、Prettier にとっては驚異的な競合になりました。これは良いことです。"
  • Hotwireとは何なのか?

    はじめに HotwireはBasecampが発表した、モダンなWebアプリケーションを作るための新しいアプローチです。名前もHTML OVER THE WIREから来ているように、HotwireではHTMLをサーバーから送ります。「それ普通のWebアプリケーションでは?」と思う方もいるかもしれませんが、SPA + APIサーバでJSONが使われるのに対し、SPAと同様の体験をHTMLを中心に置いて作るアプローチであることを示す表現です。 僕個人は、最初は「ふ〜ん」という感じだったんですが turbo-railsを読みつつHotwireのデモアプリをPhoenixに移植してみたり WebSocketではないTurbo Streamsのsourceを作ってみて遊んだり と、ある程度触ってみて良さが理解できてきたので、Hotwireを使うと何が嬉しいのか、Hotwireの各要素の紹介を記事として

    Hotwireとは何なのか?
    YassLab
    YassLab 2023/11/22
    "SPA + APIサーバでJSONが使われるのに対し、SPAと同様の体験をHTMLを中心に置いて作るアプローチであることを示す表現 / 触ってみて感じた一番のメリットは、ユーザにとっても、開発の進め方もProgressive Enhancementにできること"
  • Hotwire.io · Hotwire.io

    The JavaScript Ecosystem for Server-rendered Web-Applications Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. Faster. Smarter. Breathe life into your server-rendered applications by progressively enhancing them into full SPA-like applications. Hotwire's JavaScript sprinkles add just the right touch

    Hotwire.io · Hotwire.io
    YassLab
    YassLab 2023/10/26
    "Hotwire.io is a "a community-driven documentation and resource hub designed to promote the Hotwire ecosystem". It also includes information on tooling, helper libraries, use-cases, and more. Everything is open source - so if you can make an improvement please open a PR."
  • Rails 7 + Hotwireで実用的なSPAを作ってみた - Studyplus Engineering Blog

    こんにちは、サーバーグループの市川です。モバイルクライアントグループに所属していましたが、バックエンドの開発を担当することが多くなったので、サーバーグループ異動にしました。 最近、Studyplusブックというサービスをリリースしました。Studyplusアプリ内で、200冊以上の参考書が読み放題で使えるサービスです。 このサービスの開発にあたって、社内向けの管理画面を新規に構築したのですが、Rails 7から標準でインストールされるHotwireを利用することにしました。 今回はHotwireを実際に利用する上で、どういったUIを作ればいいか試作しましたので、その話を書きます。 作った画面 書いたソースコード 使った技術 解説 Turboを理解する Turbo Frameでフレーム分割する 追加フォーム (Turbo Frame) 追加処理 (Turbo Stream) 編集フォームと更

    Rails 7 + Hotwireで実用的なSPAを作ってみた - Studyplus Engineering Blog
    YassLab
    YassLab 2023/10/12
    “今回Stimulusは使わず、Turboのみで実現 / Hotwireは、JavaScriptをあまり使用せずに、HTMLベースで機能を実現するアプローチ / CSSフレームワークにはTailwind CSS / tailwindcss-rails gemを使うことで、Node.jsなしで導入できるため採用”
  • GitHub - patrick-steele-idem/morphdom: Fast and lightweight DOM diffing/patching (no virtual DOM needed)

    Lightweight module for morphing an existing DOM node tree to match a target DOM node tree. It's fast and works with the real DOM—no virtual DOM needed! This module was created to solve the problem of updating the DOM in response to a UI component or page being rerendered. One way to update the DOM is to simply toss away the existing DOM tree and replace it with a new DOM tree (e.g., myContainer.in

    GitHub - patrick-steele-idem/morphdom: Fast and lightweight DOM diffing/patching (no virtual DOM needed)
    YassLab
    YassLab 2023/10/06
    “Lightweight module for morphing an existing DOM node tree to match a target DOM node tree. / morphdom does not rely on any virtual DOM abstractions. Because morphdom is using the real DOM, the DOM that the web browser is maintaining will always be the source of truth.”
  • Remove TypeScript - laiso

    経緯 world.hey.com DHHが「オタクくん見てる〜? 今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan

    Remove TypeScript - laiso
    YassLab
    YassLab 2023/09/08
    "誰に影響があるのか: Turbo のコントリビューター / Turbo のインターフェイスをコードから直接呼び出すようなことはない / アプリ側ではひき続き TypeScript で書くことができる / Laravel 版があるけど彼等も JavaScript で書いてる"
  • Remove TypeScript by afcapel · Pull Request #971 · hotwired/turbo

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    Remove TypeScript by afcapel · Pull Request #971 · hotwired/turbo
    YassLab
    YassLab 2023/09/08
    “Fully recognize that TypeScript offers some people some advantages / All the love and appreciation to contributors who would prefer TypeScript. This is one of those debates where arguments aren't likely to move anyone's fundamental position, so I won't attempt to do that.”
  • What is the difference between Turbo and Stimulus, and what exactly is Hotwire?

    YassLab
    YassLab 2023/07/14
    "This is pretty cool, because all of a sudden, without adding any JavaScript of your own (though Turbo itself is a combination of JavaScript and server side Rails code), your Rails app, which even “past you” from 10 years ago would be able to grok, now looks and feels like a “modern” SPA."
  • ruby.wasmに対する思いとか、企んでいることとか - @ledsun blog

    ruby.wasmについて、現時点で僕が思っていることを記録しておきます。 思っていること 主にonブラウザ 僕がruby.wasmに興味があるのは、ブラウザで動かす方です。 エッジワーカーで動かす方は今のところあまり興味がありません。 また、ruby.wasmがプロダクションで使えることは期待していません。 つまり「Reactをひっぺがして、ruby.wasm + Railsで大統一Ruby Webアプリケーション開発だ!」みたいな線はあんまり考えていません。 というか次の2点で大統一理論に勝ち目はないと思っています。 言語を統一したところで、ブラウザとサーバーはプログラミングモデルが違いすぎる JavaScriptエコシステムの規模はRubyエコシステムの規模を圧倒している わざわざJavaScriptの資産を捨てて、イベントプログラミングに向いているわけでもないRubyを選択するメリ

    ruby.wasmに対する思いとか、企んでいることとか - @ledsun blog
    YassLab
    YassLab 2023/06/20
    “勝算はともかく、Rubyが「Flashのような入門的なプログラミング環境」の位置を目指せるということに夢を感じます。Flashはアニメーションが作りやすかった点が大きい / Ruby Association Grantは所属企業で応募できる”