oooooops私たちは今*フルスタック開発者だと思います

*「私たち」とは、フロントエンド開発者を意味します。

これは、不幸なマウンテンバイク事故が私の出席を妨げた後に作成された2019 Jamstack Conf Londonのプレゼンテーションの書面によるバージョンです。アーカイブの目的で、WordPress Gutenbergの能力を紹介するためにここで再発行しています。

？こんにちは！私のキャリアは、フロントエンドの開発と、他の人がこの分野で優れているのを助けることに専念しています。

そして少年、私の腕は疲れています。

Web開発リソース専用のWebサイトであるCSS-Tricks（最近12周年を祝う）を管理しています。

また、フロントエンドテクノロジーのソーシャルコーディングプラットフォームであるCodepenも共同設立しました。

さらに、400回目のエピソードに近づいて、Shoptalk Show Podcastを共催しています。

これらの経験を通して、私は無数の開発者と交流し、業界とウェブサイトの作成の多面的な性質に関する貴重な洞察を得ています。

フロントエンド開発者の役割の定義

cowthこれは役職であり、認められた職業です。

これは単なるセマンティクスではありません。それは関連する雇用と称号を持つ本当の仕事です。財務補償はその重要性を強調しています。

ただし、この役割とその期待をどのように定義するかは主観的です。

ハイテクジョブボードを閲覧すると、フロントエンド開発者向けの多くの投稿が見つかります。

フロントエンド開発者の役割の定義（続き）

Browser、デバイス、およびユーザーとの直接的な対話。

多くのWebプロフェッショナルは毎日ブラウザを使用していますが、フロントエンド開発者はその中に住んでおり、さまざまなブラウザー、バージョン、プラットフォームでDevToolsとテストを利用しています。

重要なことに、アクセシビリティの考慮事項など、ユーザーエクスペリエンスに優先順位を付けます。

ミナマーカムは、フロントエンド開発者の役割についての高レベルの説明を提供します。

バックエンド開発者からの区別が存在します。バックエンドの開発者がユーザーを無視しているわけではなく、むしろ責任が分配されていることです。

Monica dinculescuは適切に述べています。

ブラウザは、フロントエンド開発の中心です。ブラウザで物事がどのように表示され、機能するかに焦点が当てられている場合、それはフロントエンドの開発です。よく認められるよりも挑戦的です。

フロントエンド開発者の役割の定義（続き）

幅広いツールにもかかわらず、HTML、CSS、およびJavaScriptに依存しています。

これらは、ブラウザが理解している基本的な言語です。他のテクノロジーが関与していますが、コアの成果物はこれらの言語に存在し、フロントエンドの開発者はこれに責任があります。

習熟度レベルはさまざまです。一部の開発者は最小限のJavaScriptを書くことがありますが、他の開発者はそれに重点を置いています。これは魅力的な格差につながります。

私の記事「The Great Divide」では、この二分法を探ります。[利用可能な場合は記事へのリンクを挿入]。

これは特異な視点ではありません。多くの開発者がこの分裂を認めています。

ブラッド・フロストは、この部門を分類するために「正面の正面」と「前面の背面」を紹介します。彼は、この多様性が強みであることを強調しています。

Googleでは、この区別は認識され、ジョブタイトルに反映されており、両方のキャリアパスに対して平等な補償があります。

2015年以降のJavaScriptの卓越性は否定できません。

（より大きなビューについては、DevToolsを使用してください。あなたはフロントエンド開発者ですよね？ ）

私たちの役割は本質的に魅力的です！私たちは皆、ブラウザ、ユーザー、およびデバイスと対話します。ただし、私たちの専門知識と貢献は大きく異なります。

デザイン、写真、法的側面、パフォーマンスの最適化、アクセシビリティ、またはソーシャルメディアを専門とするものもあります。

比phor的には、これを分岐ツリーとして視覚化できます。 [利用可能な場合はここにツリー図を挿入します]。

このメタファーは完璧ではないかもしれませんが、分割を示しています。私たちは基本的なスキルを共有していますが、専門知識の多様な分野に分岐します。 1つのブランチは、JavaScriptと「Back of the Front」タスクに重点を置いていますが、もう1つのブランチはそうではありません。

このディスカッションは、フロントエンド開発者のフルスタック作業への役割の拡大に集中しているため、JavaScriptのスキルが強い人々に焦点を当てましょう。

Web開発の変化する風景

JavaScriptにシフトするバックエンドタスク

以前にバックエンドの責任を検討していた多くのタスクは、現在JavaScriptの領域内で処理されています。

コンポーネント駆動型の設計と開発

ありがとう、JavaScript！

非JavaScriptサーバー側のレンダリングプロジェクトはめったにコンポーネントを採用することはありません（例外は存在しますが、Railsランドスケープ上の広大なPHP CMSとRubyを考慮してください）。テンプレートと存在を含む一方で、それらは真のコンポーネント駆動型開発と比較して青白くなります。

興味深いことに、JavaScriptフレームワーク間の意見の相違にもかかわらず、コンポーネントの概念は普遍的に受け入れられています。ネイティブのWebコンポーネントでさえこれを反映しています。

Codepen（主に反応駆動）を調べましょう。小さなSVGアイコンでさえコンポーネントです。私たちはそれを呼びます<svgicon></svgicon>コンポーネントは、有用な側面を抽象化するためです。

アイコンと数字をペアリングすることは、繰り返しパターンと潜在的なインタラクティブ機能のために別のコンポーネントです。

MetaItemコンポーネントの行は、アイテムの他のディスプレイの側面とともにコンポーネントになる可能性があります。

その結果、アイテム全体がコンポーネントになります。

これらは、UI構築の視覚的および機能的な抽象化です。セマンティックHTMLはそれらを支えますが、これらの抽象化はカスタムビルディングブロックです。

大きなセクションがコンポーネントになります。アイテムのグリッドは、レイアウトとページネーションを管理するコンポーネントになります。

デザイナーは、概念的にコンポーネントに似た「シンボル」を使用して、Figma、Sketch、Adobe XDなどのツールでこのように作業することがよくあります。

多くの開発者は、コンポーネントをすぐに理解しています。

サイトレベルのアーキテクチャ/ルーティング

JavaScriptにシフトするバックエンドタスク（続き）

URLの取り扱いとサイト構造は、伝統的にバックエンドの懸念でした。現在、「ルーティング」はますますフロントエンドの責任になっています。

[ここにコードスニペットを挿入]

CodepenのUIでは、コンポーネント化はグリッドを超えて拡張されます。すべてがコンポーネントになります：タブ、タイトル、ボタン、フォーム、メニュー、サイドバー。

最終的に、ページ全体がコンポーネントになり、URLをコンポーネントに効果的に変換します。

すべてのURLはコンポーネントになり、サイト全体を制御できます。

この建築責任はかなりのものです。既存のフロントエンドワークロードを検討してください。消えません。拡大します。これは、フロントエンド開発者のフルスタックのような役割の増加の増加を説明しています。

国家管理、データ収集、操作

JavaScriptにシフトするバックエンドタスク（続き）

ほとんどのJavaScriptフレームワークの中心にある国家管理は、過去の多くのフロントエンドスパゲッティの問題を解決します。

ただし、州はしばしばデータ収集に依存しており、現在はフロントエンドの責任であることがよくあります。データを更新してサーバーに送り返すと、さらに複雑さが追加されます。

GraphQLは強力なソリューションを提供します。その価値は異なりますが、私にとっては、エンパワーメントについてです。

堅牢なGraphQLエンドポイントとApolloなどのツールを使用すると、フロントエンド開発者はUI構築に必要なデータにアクセスできます。

[GraphQLクエリコードスニペットをここに挿入]

データフェッチと非同期処理はコンポーネント内で管理されていることに注意してください。スケルトン、スピナー、または遅延レンダリングを使用する必要がありますか？エラーとタイムアウトはどのように処理されますか？

GraphQL変異を介してデータの操作と更新の送信も処理されます。

[GraphQL変異コードスニペットをここに挿入]

突然変異はクエリよりもそれほど複雑ではありませんが、これはフロントエンド開発者のワークロードに追加されます。これは以前にバックエンドで処理されたタスクです。

これらの例は、Apolloクライアントを介してReactのGraphQLを示しています。

コンポーネント、クエリ、突然変異、スタイリングについては、共同配置スタイリング情報を考えてみましょう。

フロントエンドの開発者は常にスタイリングを管理していましたが、自己完結型コンポーネント内では、コロケティングスタイリングが理にかなっています。

ここでは、CSSモジュールは特定のコンポーネントにスタイルを範囲します。抽象化のためのグローバルなスタイルとSASSがまだ使用されています。

[ここにCSSモジュールコードスニペットを挿入]

[スタイルのインポートを示すコードスニペットを挿入]

コンポーネント化とコロケーションの結果、ロジック、ビューテンプレート、クエリ、突然変異、スタイリングを含むフォルダーが得られます。

これは便利で、プラスの副作用があります。 JavaScriptバンドルには、必要なもののみが含まれています（コード分割）。スタイリングは膨らみません。コンポーネントが使用されていない場合、スタイルは削除されます。ファイルスコープ付きネーミングにより、命名が簡素化されます。

GraphQLドキュメンタリーは洞察力があります。 Kyle Mathews（約20:24）は、フロントエンドの問題に対するReactの影響とGraphQLの同様の効果について説明しています。

すべてのプロジェクトには適していませんが、このアプローチは大規模で複雑なアプリケーションに有益です。

既存のフロントエンドの責任：

• 設計実装
• 設計のシステム統合
• アクセシビリティの考慮事項
• パフォーマンスの最適化
• クロスブラウザーテスト
• クロスデバイステスト
• UXの考慮事項

新しい責任：

• コンポーネント駆動型デザイン
• サイトレベルのアーキテクチャ
• ルーティング
• データフェッチ
• APIインタラクション
• データ変異
• 国家管理

ワークロードは大幅に拡大します。これは、誰もがあらゆる側面を習得する必要があるというわけではありませんが、これらのタスクはフロントエンドドメイン内に収まります。

Peggy Rayzisは、フロントエンド開発の拡大範囲と専門化の増加について説明します。

多くのタスクがバックエンドからJavaScriptにシフトしています。

進化する技術スペクトル

テクノロジースペクトルの進化を調べましょう。

LAMP（Linux、Apache、MySQL、PHP）は、多くのCMSを動力としているスタックの大物です。このスタックのフロントエンド開発者は、スペクトルの遠端にあり、スタックのコアテクノロジーと最小限に対応しています。

平均（Mongodb、Express、Angular、ノード）には、フロントエンドフレームワークであるAngularが含まれます。フロントエンド開発者の作業は、このスタックでさらに重複しています。

サーバーレスは、スタックをさらに右にシフトします。サーバーのアイデンティティの関連性が低下します。焦点は、サーバー側のコードとAPIにあります。フロントエンド開発者は、サーバーレス関数を書き込み、APIを管理することもできます。

Shawn Wangは、設計システム、TypeScript、Apollo GraphQLと呼ばれ、「Star」アプリ（すべてのフロントエンドテクノロジー）を反応しました。

テクノロジーの議論は、フロントエンド開発者のスペクトルにますます中心にあります。

フロントエンド機能のサーバーレス拡張

サーバーレステクノロジーに関するWebサイトを作成しました。[利用可能な場合はWebサイトへのリンクを挿入]。

ServerLess MovementのJamstack（JavaScript、API、Markup）の一部を検討します。 （Shamstackは、より正確で、舌の舌の場合があります）。

サーバーレステクノロジーを活用するJamstackサイトは次のとおりです。サイトリストの今後のフロントエンド開発会議：[利用可能な場合はサイトへのリンクを挿入]。

[ここにマークダウンファイルコードスニペットを挿入]

各会議は、メタデータのフロントマターを備えたマークダウンファイルです。静的サイトジェネレーターとフラットマークダウンファイルは自然に適合します。

サイトは公開GitHubリポジトリです。これは重要です：

1. サイト全体がリポジトリにあります。展開には、クローニングと単一のコマンドが含まれます。
2. ログイン、許可、または資格情報は必要ありません。
3. コンテンツ、設計、および機能は、一般の貢献に対して開かれています。

GitHubページはサイトをホストできますが、Netlifyには大きな利点があります。

• プレビューを展開します
• 分析統合
• プログラマティック画像操作

Netlify CMSは、オンサイトコンテンツ編集のUIを提供し、コード編集またはGITを排除します。 Netlify IDは認証を簡素化します。

機能を検討してください。ボタンが電子メール入力フォームを明らかにします。電子メールの送信は、会議の詳細が記載されたメールをトリガーします。

これには、バックエンド機能が必要です。クライアント側のテクノロジーだけでメールを送信できません。 APIが使用されますが、APIキーには安全な管理にバックエンドコードが必要です。

[ここにスパークポストコードスニペットを挿入]

SparkPostは電子メールの送信を処理します。そのnode.jsライブラリは、プロセスを簡素化します。コードはJavaScriptです。

これはどうですか？クラウド関数（AWS Lambda、Azure Functions、Google Cloud関数）は、サーバーレスの鍵です。 Netlifyは、Netlify関数（フードの下のAWSラムダ）を使用します。関数はA /functions/フォルダーに配置され、相対URLを介してアクセスされます。

前後にサイト全体を構築することは強力だと感じています。

再訪したテクノロジースペクトル

オペレーティングシステムとサーバーの関連性が低下します。製品全体を焦点を当てることなく構築できます。

データベースはそれほど重要ではありません。データの相互作用は、多くの場合、APIを介して発生します（Faunadbなどのコンテンツフル、API中心のツール、またはFirestoreなどのページライブラリなど）。

テクノロジースペクトルは、すべての部分との相互作用を可能にします。

フルスタック機能

追加：

• git習熟度
• テストスキル
• 設計機能
• プロセス知識を構築します
• パフォーマンス認識
• アクセシビリティの専門知識
• 展開パイプラインセットアップ

？
あなたはまあです
右に散らばった
フルスタック
開発者！

しかし、

スキルセットは膨大です。

専門化が可能であり、可能性があります。

「実際の」ユニコーン（ウェブサイト構築のあらゆる面に熟練するもの）はまれです。

バックエンド開発者は非常に重要です。ウェブサイトの複雑さは彼らの専門知識を必要とします。

Codepenの問題トラッカーは、私が単独で処理できないタスクを明らかにしています。バックエンドサポートが不可欠です。私は自分自身をフルスタックと考えることができますが、バックエンドスキルは私の弱点です。

現実はしばしばこれに似ています。

または、私の場合は次のとおりです。

これは軽rog的であることを意図したものではありません。それは比phorです。私たちは馬またはドラゴン全体ですが、荒いエッジがあります。

テクノロジーがプロセス全体を包含することを可能にすることはエキサイティングです。複雑さが参入障壁を上げると懸念が生じます。ただし、テクノロジーがプロセスを簡素化する場合にも励みになり、個人が物事を独立して構築できるようになります。

品質はすべての人の責任であることを忘れないでください。

• 良いUX
• 良いパフォーマンス
• 良いセキュリティ
• 良いアクセシビリティ
• ユーザーの倫理的扱い

これらの側面に影響を与えるコードに直接関与していなくても、適切な取り扱いを提唱します。

Codepen Pro（地元の職人クラフトソフトウェア製品をサポート）

以上がoooooops私たちは今*フルスタック開発者だと思いますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。