Gatsbyケーススタディ:Livechat市場

LiveChat ビジネスメッセージングプラットフォームは、企業が自分のウェブサイトの訪問者と同様に、他の通信チャネルを介して連絡を得る顧客(潜在的)と通信することができます.
特定の企業の個々のニーズにプラットフォームを調整するには、ユーザーは170 +アプリ、統合と拡張機能が用意されています.彼らは、我々のウェブサイトとアプリの中で利用できる市場で、彼らを見つけることができます.
しばらく前に、我々はそれをギャツビーに移行しました.我々のフロントエンドの開発者の一人、JakubJAMStack Wrocław このプロセスについて話す.
物語:

どうだった

まず第一に、あなたはpublic Marketplace とin-app Marketplace ( livechatが必要)account 同じソースコードを持っていて、同じように見えるために使用します.私たちの製品は、LiveChatエージェントアプリケーションとLiveChat公共のウェブサイトは、進化していたが、ルック＆フィールも変化していた.いくつかの時点で、コードをきれいに保つために、より多くのCSSハックを作ることができませんでした.

直面する課題

そのため、以下のような問題があった.
1つのコードベースで2つのバージョンの市場のために1セットの構成要素を保つ方法?
我々は、コンポーネントの1つのバージョンを実装し、1つの場所にそれらを維持したい.これらのコンポーネントは両方のバージョンで使用できます.
どのように各バージョンの異なるスタイルを使用するには?
市場版はスタイリングによって異なります彼らには、異なるフォントと色があります.
3 .どのように表示し、いくつかのコンポーネントを非表示にバージョンに応じて?
市場のアプリのバージョンは、ヘッダーやフッターを必要としません.これはLiveChatエージェントアプリケーションから来ているものを使用します.他方、公共の市場はこれらの構成要素の両方を必要とするが、左側サイドバーは時代遅れである.

ギャツビーがプロジェクトにもたらしたこと

我々は解決策を見始めたGatsby 提供しなければならなかった.彼らは建築の概念を持っていることがわかったthemes つのコードベースを異なるビジュアルバージョンで保つために.
この解決策は私たちにとって完璧でした.我々は、公共の市場に使用するベーステーマを作成することができますし、コンポーネントのシャドーイングを使用してアプリケーションの市場のバージョンを生成する.
コンポーネント
これがギャツビーだdocumentation コンポーネントシャドウイングについて言います.

この機能は、ユーザーがWebpackバンドルに含まれているSRCディレクトリのファイルを自分の実装で置き換えることができます

実際に何を意味するかを見るには、コードベースから例を考えてください.
の2つのバージョンがありますAppListVertical アプリケーション内でアプリケーションを表示するコンポーネントとパブリックマーケットプレースとは異なります.以下に、パブリックマーケットプレースコンポーネントのバージョンがあります.packages/marketplace-base/src/components/AppListVertical.js

...

const AppListVertical = ({
  apps,
  className,
}) => {
  return (
    <div className={className}>
      {apps.map(app => (
        ...
      ))}
    </div>
  )
}

export default AppListVertical

注意className 小道具これは、コンポーネントシャドウイングを使用したスタイルをオーバーライドするための推奨された練習です.
以下に、私たちは同じコンポーネントを持っていますが、アプリケーションのバージョンではオーバーライドします.in-app/src/marketplace-base/components/AppListVertical.js

...
// Import the base component
import AppListVertical from 'marketplace-base/src/components/AppListVertical'

// Some styles overrides
const updatedAppsWrapperCss = css`
  @media (min-width: 500px) and (max-width: 720px) {
    grid-template-columns: repeat(3, 124px);
  }
  @media (min-width: 720px) and (max-width: 830px) {
    grid-template-columns: repeat(4, 124px);
  }
  @media (min-width: 830px) and (max-width: 959px) {
    grid-template-columns: repeat(5, 124px);
  }
`

export default props => (
  <AppListVertical css={updatedAppsWrapperCss} {...props} />
)

これはコンポーネントシャドウイングで達成できるものを垣間見ることです.このブログ記事の最後に推奨されるリソースセクションでより多くの例を見つけることができます.

今より良い

我々はシンプルを信じている.このアプローチでは、ほとんどのコンポーネントを1つの場所に保ち、どちらのバージョンのマーケットでも必要なだけをオーバーライドできます.これまでのところ、私たちはコンポーネントについて言及しましたが、CSS、定数などをオーバーライドすることもできます.この解決法の美しさは、ほとんどの場合、1つのことを変更する必要があり、コンポーネントは既に2つの市場版に適用可能です.
今日の市場
これは、今日市場の2つのバージョンがどのように見えるかです

市場のAppバージョンで

市場のパブリックバージョン

我々の開発者コミュニティに加わってください

開発者として、あなたは我々の開発プログラムに参加し、市場生態系の一部になることができます.一度アプリのアイデアを持って、行くDeveloper Console , 登録し、建物を起動します.それが準備ができたら、レビューのためにあなたのアプリケーションを提出する.私たちのチームは、それを評価し、両側が幸せなら、あなたのアプリは公に我々の市場で利用可能になります.
あなたはアプリの貨幣化を決定することができます.あなたのアプリを支払う必要がありますように感じる場合は、開発者コンソールであなたの価格設定モデルを選択することができます.あなたのアプリは無料でもすることができますし、それはokです.
ご質問の場合は、必ず連絡してください[email protected]
推奨資源
JAMstack presentation
Developer Program
Public Marketplace
How to monetize apps
App Review process