GitHub Repos

Sadly by necessity some of my repos are private. Those that are private are clearly marked. For those that are, please don’t ask me to share the code, because I can’t. They’re listed here purely for my reference.

Other Resources

Intro to Ember

  • These notes were written 2018
  • There might be some useful sample code at Cadogan (PRIVATE)
  • Based on Glimmer js - compiles to byte code
  • Testem.js controls tests
    • Ember test –server – runs with a headed browser
    • Then you call pause tests in your acceptance test, then control it from there – can be useful for debugging
    • Phantom js is officially deprecated – not being maintained any more – Chrome has its own headless option
    • Puppeteer allows you to use javascript to control Chrome – a bit like Selenium – focused on Chrome – allows you to access dev tools
  • Accessing the DOM in Ember – eg modifying something in the header in HTML – don’t have access to that in Ember
  • Your*/ application essentially has a domain which is (eg) a particular div, so you can’t see outside that
  • You can do it with add-ons, but then you have to create your own add-on
  • Ember seems to expect you to rely on add-ons
    • There’s also the concept of engines (which we weren’t using) – a way of chunking functionality –
      • eg we have an 800Kb vendors file (everything you might find in package.json, plus Ember itself) (uncompressed – goes down to 300-ish in production)
      • but the non-vendor javascript is only about 30kb (compressed?)
  • Ember generate component: ember g component [component-name]
    • ! Must contain a hyphen! This avoid conflicts with HTML elements, which are not allowed to contain hyphens.
  • Ember generate route: ember generate route [route-name]
    • this doesn’t have to have a hyphen
  • Application. Hbs
  • That application route is always there – topmost route – always the parent route
    • But not the home page!
    • It’s like the root object
    • Anything in application.hbs can be global
    • In the middle there is something called outlet – this allows the SPA experience
    • Whatever the route is, its contents will be placed in outlet – eg index.hbs or restaurant.hbs
    • For nested routes, you will also see an section – only this bit gets rerendered

Installing & Running an Ember Code Base

  • (NB: This was based on another code base which may have been customised beyond vanilla Ember JS)
  • Clean clone
  • Install Python (and make sure it is added to PATH)
  • Npm install node-sass
  • Npm install
  • Bower install
  • Npm install -g ember-cli
  • Ember Serve
  • Then visit http://localhost:4200 in the browser
  • Changing stuff:
    • To change what you’re hooking up to for the back end, see config/environment.js
    • If you want your front end to point at a different environment, change ENV.APP.BACKEND_URL (in environment.js?)

Debugging

  • To debug: add the word debugger into the javascript, then inspect element and it will hit a breakpoint at the word debugger

Code Structure

  • This is the description of a particular code base (available [here]( https://github.com/claresudbery/cadogan) to Clare only), so I don’t know if it applies generally to all Ember code bases
  • All the code is in the app folder:

Config

  • Config folder: Main config file: environment.js:
    • Some of it is default stuff provided by ember js
    • Several environment-specific configs

Folders and root files

  • Dist folder is created when you build the code
  • Public folder – static resources: images, fonts, css
  • Scripts – deployment sripts and contentful syncing scripts
  • App folder contains code written by us
  • bower-components and node_modules : Auto generated by npm install and bower install
  • Ember-cli-build.js:
    • Defines some external dependencies (lines starting app.import)
    • Fingerprint: used only in production
      • Index.html – – used cloudfront env to load resources
      • If you view source for home page for local, you’ll see href for stylesheet is going to /assets/…, but for prod you’ll see it goes to cloudfront – to provide region-specific location and caching.
    • Ember-cli-selectize – drop-down context-specific searching
    • GTM (Google Time Manager) not active in app/index.html – google analytics

Components:

  • Reusable HTML
  • Much easier to test
  • Often don’t have much in their js files
  • But look at templates/components to see the real meat of each component

Controllers:

  • This is where your actions live
  • Actions are referenced in templates
  • You will automatically get a controller created for you behind the scenes, but you can override by manually adding one here
  • The file names are the same as the corresponding routes

Helpers:

  • Eg price-resolver
    • See last line – registers it as a helper in ember framework

Routes:

  • App/router.js refers to the routes folder – sets up all our routes
  • Routes are predefined – path is fixed – can’t be reused in different locations
  • Eg routes/location.js
    • In model(params)
      • Location_id is referenced here
        • Router.js: location_id is defined here
      • This.get – is referring to services defined in app/services
    • Location: ember.inject.service() – doesn’t specify service name – works it out by default – so you don’t actually have to specify service name
  • Eg routes/offer.js
    • Sets up a model which is then used in offer-page.hbs
    • The model comes from the offers service
    • Query params can be referred to via params, eg params.campaignId
    • User navigates to offer route via templates/components/offer-tile.hbs in a link-to handlebar
  • titleToken and setHeadTags appear in every route – this is to make the site more SEO-friendly
    • we use a library for these
      • ember-cli-meta-tags and ember-cli-document-title – see package.json, in the devDependencies section
      • We’re using cli to download and install these depedencies
      • Once we’ve installed the cli, then internally it embeds these dependencies in ember cli – this is why they can stay in devDependencies and don’t need to be in dependencies (which is all the dependencies that also need to be installed in prod)
      • The ember js module has internally converted these dependencies into ember js code
    • see routes/application.js – title is set using tokens

Services:

  • Eg Offers.js
  • Uses the backend service
  • Fetches data via backend
  • Data comes back quite raw - we parse it to make a neater model, which is then fetched in routes/offer.js

Styles:

  • We use sass, ie *.scss, which allows us to have variables and logic in our css
  • Compiles down to css
  • You can see the compiled css in the dist/assets folder

Templates:

  • One-to-one relationship between hbs files and js files
    • Hbs files are templates
  • Most templates are tied to routes via naming convention
    • The default is a template with the same name as its associated route
      • If you look at the offer route you can see it explicitly specifies a differently-named template
  • Components:
    • (See above for intro to components)
    • Examples:
      • templates/components/Offer-page.hbs
        • Used by offer route (routes/offer.js)

Running Tests

  • Run subset of tests: On the command line: **ember test -f “Unit  
    Service offer”**
    • “Unit | Service | Offers” is the name of an individual suite of tests – you can copy this from the top of any test file
    • If you want to run an individual test, add a colon and then the individual test name: ember test -f “Unit | Service | offer: should call backend contentful service and get offer extra info”
  • Run all tests except end_to_end_tests: ember test -f “!end_to_end_tests”
    • (the reason for excluding end_to_end_tests might be that they require mocks to be running locally for them to work)
    • !! It seems to prefer single quotes on the Mac and double quotes on Windows
    • If you get an ‘event not found’ error, try switching your quotes.
  • If a test fails, the name of the failing test will be shown on the command line.

Configuring Tests from Command Line

  • package.json – scripts section
    • to run any of these, syntax on command line is npm run [script name]

Integration tests

  • (sample code base is here – available to Clare only)
  • These use Ember-qunit, which renders Ember components
  • So basically we’re testing that the correct things are rendered – so, the component is doing what it should with data passed in, and based on Ember templates
  • Handlebars and components are tested in integration tests created by ember