Skip to content

Instantly share code, notes, and snippets.

@jenweber
Created July 1, 2021 15:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jenweber/da56e52ad57afaeff00bd72005340253 to your computer and use it in GitHub Desktop.
Save jenweber/da56e52ad57afaeff00bd72005340253 to your computer and use it in GitHub Desktop.
Welcome page proposal draft

Improving the hello world app experience

We have learned from our users that it can be confusing to generate a new app and not be able to edit what you see when you run the app locally. We want to give our new users the chance to make small changes to the welcome page experience, as part of their learning journey.

How things work today

Today, by default, all new apps come with the ember-welcome-page, which has a component and CSS that show up in application.hbs.

Developers can exclude this addon via a flag, --no-welcome-page when they generate a new app.

In a production build, the welcome page assets are stripped out. You get an error and a blank screen if you try to deploy the "Hello World" Ember experience.

Considerations

  • Bundle size - we know that the Ember core teams want to keep Ember's production build bundle size as small possible. In general, this goal helps us Ember be competitive in quantitative comparisons with other frameworks.
  • User experience - The welcome page is likely someone's first experience running Ember locally.
  • Maintenance - whatever changes are made must work well for ember-cli-update

Drawbacks of today's approach

  • It is strange to have an extra dependency in new apps
  • New users can't find any of the text on the welcome page and will get lost/frustrated/confused as they try to make changes to it

Goals for changes

  • Let new users explore the welcome page component and see how it works.
  • We want to keep the bundle size as small as possible
  • Once someone has created the app and installed dependencies, they do not need any internet to see the welcome page
  • Someone should be able to deploy the app with its welcome page
  • The app comes with everything you need to complete the tutorial.

Proposal

When you generate a new app, you can include the flag --tutorial. These instructions are provided in Ember's official tutorials.

When you include this flag, the following things happen:

  • The application.hbs file uses a component, <WelcomePage />
  • The WelcomePage component's files are created in the component folder
  • CSS for the welcome page and official tutorial goes in tutorial.css and there's an import in app.css
  • Images go in the public/images folder, or we remove our reliance on images

We would not strip out any of these assets in production builds. The tutorial will encourage people to remove them once they don't need them.

The welcome page will include links to correct version of the Guides, Tutorial, and API docs.

We would deprecate the --no-welcome-page flag and the ember-welcome-page addon.

Alternatives considered

  • Hotlink the image - this does not fit within our goal of making the welcome page work offline
  • base64 encoded image - confusing to new developers
  • Putting css directly in app.css - we want to encourage best practices and make it easy to remove the tutorial.css when it's time.

Feedback on Tutorial

  • It's easy to miss the link to download the CSS. We should explore ways to make this more prominent.

Next steps

  • Devashish will open an RFC that contains the new feature and deprecation, together with Ankush and Sumit
  • Try to think through as many details as possible. Think about what questions someone may have, and include your best guess at the answer in your proposal.
  • Identify who would implement the changes
  • Locks is available to review and respond to questions
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment