Here is a highlighted overview of the major points from some of my favorite EmberConf 2019 talks:
DAY 1
Opening Keynote β Yehuda Katz, Tom Dale
- Ember turns 8 years old in April π
- A Brief History of Ember from IE6 to ES2018 -Dr. Tomster π
- Staying true to our values, not chasing trends
- Climb the mountain together π
- Shared tools that work when you’re starting out and scale up
- Shipping features is more important than tinkering with config files π’
- Avoid having to stop and rewrite you application
- The Celery Test
- What decisions we make will communicate to the world what we really believe
- Before taking external advice, make decisions based on our values
- What we did β
- Ember CLI, Templates, 6-week release cycle, RFC process, Code Mods, Engage with Standards, Community, Ember Addons
- What we did not do β
<script>
tag, Web Components, Framework reboot, Ember Native
- Stability β Progress (The tension between Stability and Progress)
- Aggressive Changes (Community Fragmenting π) β Cautious Changes (Falling Behind π) β Aggressive Changes (Community Fragmenting π)
- Aggressive Changes: Ember 1.13 - DDAU, Many deprecations, Big foundational updates, Ecosystem churn
- Cautious Changes: Ember 2.x - Less notable features, more stabilization
- Ember 3.x - Find a balance between shipping things incrementally and keeping an eye towards coherence
this.get('firstname'); this.set('firstname')
βthis.firstname; this.set('firstname')
- In 2.x this probably would not have shipped because of the asymmetric nature of the change
β¬β¬β¬{{user-avatar user=currentUser}}
<UserAvatar @user={{this.currentUser}} />
- Unless you pay attention to every RFC and every PR how would you know when to adopt new features π€·ββοΈ
- Where we are β (incremental changes) β Pit of Incoherence β (incremental changes) β Where we want to be
- Shipping relentlessly in the past year π³
- Ember Editions π₯
- Bend of the curve of tradeoffs
- Points of maximum coherence
- Polished feature set
- Ember Octane ππ
- Allocate a sprint to use the new features
- β No jQuery required: Ember(128Kb) - jQuery(29Kb)
- π€© JS Classes
- Standard syntax and tooling integration
- Works with TypeScript
- Decorators and Class Fields
- Simply a syntax change:
import { X } from Y
will work the same in both Classic invocation and Modern invocation
- β Angle Bracket Invocation
- Disambiguate between Properties and Attributes
- Easier to scan visually
- β¨ Glimmer Components
- New modern and minimal base class
- Explicit 1-way bindings
- “Outer HTML” templates
- Explicit, immutable arguments
- π Tracked Properties
- New change tracking
- Fast, efficient updates
- “Just JavaScript” - No need for
this.set()
- One Simple Rule π: “If you change a class field and want the DOM to update, make it tracked”
- Mutation is no longer a dangerous thing that you need to think about
- Migrate slowly, all underlying primitives seamlessly work together π
- Use them anywhere, even with Native JS Classes
import { tracked } from "@glimmer/tracking" export default class Person { @tracked firstName; @tracked birthYear; constructor(firstName, birthYear) { this.firstName = firstName; this.birthYear = birthYear; } randomizeAge() { this.birthYear = //... } }
HTML
βTemplate
βDOM Output
all share the same structure
- Ember Octane Preview available today! π£π₯π
- So…what’s coming next β
- New file system layout
- Template imports
- “Embroider”
- Next generation build pipeline for Ember apps
- Asset optimization
- Built on JS Modules
- Beta Ember Observer
- Ember app built with Webpack running in production
Building a UI Styleguide in Ember β FrΓ©dΓ©ric SoumarΓ©
- Why build your own Styleguide?
- Because you can… π
- It has never been easier to build extensible clean layouts with CSS
- Flex
- Grid
- 4 Concepts: UI Elements β UI-Kit β UI StyleGuide β Design System
- Work on your app, start to realize a pattern of components being used on many pages
- Split your apps…now how do I use these components between both β
- Ember Addons π
ember addon my-ui-kit --yarn
ember g component x-button
- Addon
/app
directory will merge with the namespace of the consumers/app
directory - Dev tips π
cd <ui-kit-addon> yarn link cd <ember-app> yarn link my-ui-kit
- ember-cli-addon-docs
- Snippets, Live Demos, Docs β
- SASS color palette β JSON export
my-ui-kit/index.js
preprocessTree()
hook
- ember-styleguide
- Designers β Developers
Your Desktop, the Studio β Kate Ruggeri
- Just completed one full year as a professional Ember Developer π
- How to become a better programmer (…or artist):
- 1οΈβ£ Practice
- 2οΈβ£ Critique
- 3οΈβ£ Reading Theory
- 4οΈβ£ Look at the Masters
- Looking is demystifying and be a powerful experience π΅
- How to steal?
- “Oh, I can do that too!”
- Masters are around you β
- Learn to ask questions, developers love to share their secrets π€
- Art studio is private, organized…Just like your office workspace
- Things can get overwhelming π©
- π You’re looking at a huge code base
- π₯΅ You have lots of responsibilities and deadlines
- π But…Your tools create a sense of control
- Junior Dev === Investment
- Carving time out on the clock to learn your tools
- Masters know and configure their tools π
- Pretty things are easier to understand
vs.git log
git log --pretty=format:%C(green)%h\ %C(yellow)[%ad]%Cred%d\ %Creset%s%Cblue\ [%cn] --decorate --date=relative
- Look outside of your field
- Surround yourself with things that inspire you
- “Keep it weird”
- “Have fun”
Comparing Patterns in React and Ember β Preston Sego
- React needs decisions around tooling and patterns π
- React is just components
- Simplicity of only having to work with 1 concept (sort of…)
- Ember comes with battle-tested abstractions β
- React vs Ember
- App creation
- React: Webpack
- React:
npx create-react-app my-react-app
- No testing out of the box π
- Errors have syntax highlighting π€
- Components
- Presentational
- Contextual
- Container (Renderless)
- Higher-Order (React-only)
- State management
- Where does business logic go?
- Local state
- Context Provider/Consumer (React)
- Services manage the state in Ember
- React would need to create a state management system
- Redux
- Wrap nested providers around entire app, which leads to the Pyramid of Doom π±
- Data Down, Actions Up (React/Ember)
- Prop-drilling 😦
- Where does business logic go?
- Concurrency
- Redux-Saga (React)
- ember-concurrency (Ember)
- Authentication
- ember-simple-auth π
- Testing
- Stubbing context’s in React (unDRY, hacky) π€’
- Routing
- Ember:
ember g route my-route
does all of the heavy lifting - React: Most people use React Router
- Ember:
- API / Remote Data
- Ember: Promise-aware
model()
lifecycle hooks - React: No model hooks,
useEffect()
, no canonical way of fetching data
- Ember: Promise-aware
- APIs with Relational Data
- React: Custom
fetch
requests, Apollo GraphQL
- React: Custom
- Query Params
- React: Easy to grab of the
location
object - Ember: Big pain point right now β
- ember-query-params-service hopes to address these issues
- React: Easy to grab of the
- App creation
Typed Ember: Strong Types for Better Apps β James C. Davis
- Open Science Framework - 100% TypeScript, 100% Open Source, 100% Ember
- Why TypeScript?
- “Automatic” documentation with type annotations π₯
- Reduce run-time errors
- Helps with refactoring
- What’s a type?
string
,number
,boolean
- A type is just a shape
type Person = { name: string; height: number; birthday: Date; isMarried: boolean; }
- TypeScript is compiled to JavaScript
- Will not affect how JS works
- ember-cli-typescript
- Build-time type checking
- Break the build if you want when types do not check
- Sets up the basic type definitions you’ll need for Ember framework objects
- Blueprints
- Produce a nice syntax highlighted Type Error
- FAQs β
- Do I have to convert everything at once? Nope! β
- Where do I start?
- Models
- Services
- Shared Components
- What about addons?
- Precompile to JS so consuming apps don’t need to use TypeScript π
- Include type definition file as well
- Pain Points
- New syntax and new concepts to learn
- Type definitions for third-party addons
- Type definitions for Ember and Ember Data
- Learn more at
#e-typescript
on the Ember Community Discord
Crafting Web Comics with Ember β Jessica Jordan
- The Glasgow Looking Glass (1826)
- Japan: 12th / 13th century β Hokusai Sketches (1814)
- β© 1990’s β Comics go to the Web
- Artists using the Web to share comics experiences π¨
- What if I just use Ember?
- Anatomy of a comic
- Comic pages
- Defining pages as routes
- Comic panels
- Motion through sequence π§ π
- Comic pages
- Java Applets
- Flash
- Web Animations API
- Evergreen browsers + Polyfill
let opts = { duration: 3000 }; let keyframeSet = [ { transform: 'translate(250px)' }, { transform: 'translate(0)' } ]; let keyframes = new KeyframeEffect(element, keyframeSet, opts);
- Steps timing function -
easing: steps(5)
this.animation.play()
- Why Ember?
- Clear separation of concerns
- Only load data where it should be loaded
- Composable
- Conventions
- Community
- ember-in-viewport
- Safety measures ⚠️
- “PokΓ©mon Shock” incident - Japan (1997) π¨
- Photosensitive users
- Keyboard accessibility
Anatomy of an Addon Ecosystem β Lisa Backer
- ember-service-worker
- Provides a framework for managing Service Worker code
- What is a Plugin? π
- Bundle that adds functionality to a host application through a well-defined architecture for extensibility
- An Addon is a Plugin
- Configuration (Start with Docs)
- Ember CLI hooks
- Ember Observer code search feature
- Time to dive into the code π
ember-service-worker/index.js
treeForVendor
- Broccoli Trees/Nodes
- Set of files that can be transformed by Plugins
- A
build()
function is called on each Plugin β
package.json
keyword naming convention to create a collections ofember-service-worker
Plugins"keywords": [ "ember-addon", "ember-service-worker-plugin" ],
- Implement a plugin architecture?
- Testing
- Not like testing a normal Ember application
- Testing the build of an application
- Unit tests for core functionality
- broccoli-test-helper
Developing an Ember Test Strategy β Todd Jordan
- Ember 💕 Tests
- How do I prevent my tests from becoming a burden?
- Speed and feedback loops
- Deming Cycle π
- Plan β Execute β Analyze β Adjust
- Influenced Toyota (Continuous improvements, Tight feedback loops)
- Implementing Lean Software Development π
- Boehm’s Law
- The later you find a missed requirement/bug, the more expensive it is
- The earlier you find and fix your bugs, the more successful your project will be
- Agile Manifesto π
- Describe testing in an Agile environment
- How to distribute your tests? π€·ββοΈ
- UI (πΆββοΈπ°π°π°π°π°) β Service β Unit (πββοΈπ°)
- Ember Application Test (33 min/1000 tests) β Ember Rendering Test β Ember Unit Tests (1.7 min/1000 tests)
- 40%/50%/10% Test type distribution for a sweet spot
- Push scenarios as far down the test pyramid as you can
- Avoid duplication between test types
- Don’t be afraid to delete tests that are not beneficial (Long running, etc)
- Test Workflow
- Test β Write code to make the test pass β Refactor
- Growing Object-Oriented Software, Guided by Tests π
- Keep an eye on your feedback loops
- Test in a methodical way that drives Design
- Thought and discipline are faster than quickly cranking out code
Don’t Break The Web β Melanie Sumner
- 1990s: Write code β Save file β FTP to server β Check in browser β Repeat
- Much easier now:
ember new my-app; ember deploy production;
π€ - Web Accessibility analysis on the top million web pages
- 97.8% of websites had accessibility errors π±
- The presence of a JS Framework indicated a higher number of accessibility errors
- 85% - Low contrast
- 68% - Missing alt text
- 58% - Empty links
- 100% of these issues are preventable
- Are we focused on the right things? π
- Too many excuses we tell ourselves for avoiding accessibility in our apps
- “But…Our clients didn’t ask for accessibility”
- You didn’t ask for sugar in your cookie πͺ
- “But…Implementing accessibility is just too hard”
- “But…This just isn’t an Ember issue”
- “But…Our clients didn’t ask for accessibility”
- ember-optional-features
ember feature:disable application-template-wrapper
<body> <header> <!-- --> </header> <main> <!-- --> </main> <footer> <!-- --> </footer> </body>
- Visibly support accessibility efforts
DAY 2
Dealing with Data in 2019 β Igor Terzic
- Been working with Ember for entire professional life
- Working on Ember, Ember Data and Ember-related libraries for the past 8 years
- 2011: Java Swing app π¨ β CoffeeScript, GruntJS, Ember π©
- Made some bets that worked out really well and built trust π€
- Programming Model: Separation of concerns
- Isolated the Model Layer with a schema
// component model.save(); // template {{model.isSaving}}
- ember-cli-mirage - Now because you have a schema, mirage automatically knows how to configure your backend
- Isolated Serializer layer
- Fastboot - Easy inter-op
- Embracing the consistency
- JSON API - Minimal amount of configuration necessary to play nicely with Ember
- Identity Map
- Relationship consistency:
belongsTo()
,hasMany()
- A framework for ambitious web developers. π
- 2019 β 2025
- Advanced data fetching, caching and mutating
- Dan Gebhardt: Give Apps Online Superpowers by Optimizing them for Offline
- Developer experience and visibility
- Productivity Tricks
- “Not doing work beats doing work in the fastest possible way, every time”
- Dynamic schema: ember-m3 β Ember Data core ❓
- ember-data-storefront
export default PostsRoute extends Route { async model() { await this.get('store').loadRecords('post'); return this.get('store').peekAll('post'); } }
- Goal: All Ember Data addons β No Private APIs
The State of Community Documentation β Kenneth Larsen
- Documentation is generally the first encounter you’ll have with any Ember project
- We’re all responsible for documentation π¨βπ©βπ§βπ¦
README.md
- Should serve a nice and concise introduction to your project
- Should not answer every single question 👎
- Badges 👍
- Generally too cluttered and filled with code examples π’
- Blueprint documentation needs some adjustment
- Extract out to
CONTRIBUTING.md
β¨- Github prompts doc changes
- Unhelpful phrasings
- “Simply run the tests. Just type
npm test
” - “Just write your own compiler, then it simply works”
- Just, Simply, Simple, Actually, Easy, Easily, Obviously… 👎
- “Simply run the tests. Just type
- Inconsiderate Writing β
- Cultural differences are everywhere
- ember-cli-addon-docs to the rescue! π¦ΈββοΈ
- Alex and ember-cli-alex: linter to help catch inconsiderate writing
Communication and Convention β Julia Donaldson
- So…why Ember?
- But that learning curve though… π©
- Everything has a learning curve
#realtalk
- Everything has a learning curve
- Ember is not really about productivity
- Previously a Fashion Designer π
- As a user, I should be able to move my arms and feet
- Creative solutions within a set of requirements (..just like Software)
- Fashion Designer β Code Bootcamp
- The “right” words
- Communication is a skill…a skill that can be learned
- Ideas π‘
- The tools we choose, are simply vessels for our ideas
- Art and Fear by David Bayles π
- To bring our ideas into the world, we need to be able to communicate them
- How do I communicate my thoughts in a way that is productive?
- Talking about code is hard
- Ember β Gives a vocabulary to frame my ideas π
- Democratize the Language
- Communication π Confidence π Participation
- Web development is not about the individual anymore
- The tools we choose should connect us
- “Opens up someone elses React app…” π²π±π΅
- Communication that scales
- Ember’s structure spawns creativity
- How do we define ambition?
- “Ambition is a dream with a V8 engine.” -Elvis Presley
Ember is for Everyone β Kenigbolo Meya Stephen
- Code Afrique
- A group of software developers giving back to people under-represented in our industry
- People learn differently π»
- Theres no guaranteed way of ensuring people grasp the concepts
- Process: Variables β Object β Functions
- Don’t need to learn about traversing a binary tree
- Problems that come with teaching JavaScript
- Framework, Framework, Framework ❗
- Typical pitfalls?
- Lazy loading
- Too many Computer Science concepts
- Seems to be a frontend framework designed for a backend developer
- Not just designed for beginners
- Ember Power π¦ΈββοΈ
- Routers
- Templates
- Convention
- Simplify concept explanations π¨βπ«
- Explain to beginners without technical phrases
Building Better Components β Dianne Eramo
- “The ratio of time spent reading vs writing is well over 10 to 1. […] Making it easy to read makes it easy to write” πβ
- Keep Things Manageable 🌟
- Single Responsibility Principle: Each component should be responsible for 1 concept
- Don’t Repeat Yourself Principle: Eliminate duplication
- Don’t prematurely abstract your code
- Ember Component Patterns π₯
- Reusable Component Pattern: DDAU, don’t mutate data the component doesn’t own
- Single Purpose Component Pattern
- Has a single clearly defined use case
- Context aware
- Pass in entire model as an argument
- Directly mutates data
- Reusable (Addons) β Single Purpose (Forms)
- Provider (Renderless) Component Pattern
- Only concerned with how things work (load data)
- Does not render HTML or CSS
<PercentageComplete @completed={{this.completed}} @total={{this.totalFields}} as |percent|> <ProgressBar @percentCompleted={{percent}} /> </PercentageComplete>
- Presentational Component
- Contextual Component Pattern
- Makes relationships between related components explicit
- Provides default behavior for consumers
// components/templates/modal.hbs {{yield (hash header=(component "modal/header" closeModal=(action "closeModal")) body=(component "modal/body" style={{bodyStyles}}) footer=(component "modal/footer" closeModal=(action "closeModal")) )}} // templates/form.hbs <Modal @onClose={{onClose}} as |M|> <M.header @title="Edit User Application" /> <M.body> <EditUserForm @user={{provider.user}} @saveUser={{provider.saveUser}} /> </M.body> </Modal>
- Write the Component Interface π
- Expose the bare minimum that you know will be needed
- Every property provided is a feature that can break when you make changes
- Small component interface 👍
- Manage UI state with declarative rendering
- Declare all component state inside the component file
- Never rely on the DOM for you state ⚠️
- Ensure component re-renders whenever any of the state changes (Computed Properties,
this.set()
)
Composable Concurrency Tasks β Isaac Ezer
- ember-concurrency
- Generators
function* ()
- A function which can
yield
intermediate values and pause/resume execution for...of
loop- Directed graph iteration with Generators:
N x N
adjacency matrix - Browser support
- A function which can
- Ember Concurrency π
- Removes the need for manual state tracking and
isDestroyed
checks - Simply yield intermediate promises
- Derived state
myTask.lastSuccessful.value
- Maked “chained” promises cancelable by being able to abort task execution at each
yield
- Removes the need for manual state tracking and
- Higher Order Ember Concurrency Tasks
- “Wrapping ember concurrency tasks”
- ember-concurrency-test-waiter: Notify our test runner that a Task is in flight
- ember-concurrency-retryable: Task exponential backoff
New to Ember: What ARE All These Things? β Jennifer Wong
- The ABC’s of Ember
- Rock & Roll with Ember.js
- A β
A()
- B β
{{#basic-dropdown}}
- C β
- D β
- E β Ember: The Documentary
- F β ember-cli-flash
- G β Glimmer.js β¨
- H β
- I β
{ inject as service }
- J β JSON API Adapter
- K β
Ember.K
- L β
{{link-to}}
- M β
- N β Naming Conventions
- O β
{{outlet}}
- P β
ember-power-select
- Q β
- R β RSVP
- S β
ember s
- T β
task()
- U β Utils
- V β View
- W β ember-wormhole
- X β emberx-select
- Y β
{{yield}}
- Z β Zoey
EmberConf MiniTalks
How to Grow or Save Your Favorite Open Source Project β Jen Weber
- All volunteers are selfish
- Few people act out of true altruism for very long
- The happiest volunteers get something in return
- Reciprocity
- Commitment & Consistency
- Always say “Thank You” to other volunteers
How I Learned to Stop Worrying and Love the Mono Repo β Hassan Abdel-Rahman
- What is a Mono Repo? Single repository with multiple node modules
- Code cannot get out of sync with itself π
- Atomic changes across multiple modules
- Testing
- Issue management
- Yarn Workspace
- Single shared
node_modules
- Single shared
- How to Mono?
ember g addon
for eachin-repo
addon- Move boilerplate addons into
packages/
directory - Convert to use Yarn Workspaces
{ "private": true, "workspaces": ["workspace-a", "workspace-b"] }
- Ember Mono Repo example app
- Lerna for publishing
From Mainframe to Mainstream: A Case Study in Emberification β Ryan Mark
- Rewrite a major Fortune 500 company’s core application including Testing and Deployment
- Mainframe terminals suck
- ember-cli-deploy, Spring, Jenkins
#winning
- Productivity β Adoption β Success
How to Build a Blog Engine in 15m With Ember and NodeJS β Chris Manson
- empress-blog
- Quick way to bootstrap a new Blog with Ember π₯
- How do I get setup?
ember new super-blog
cd super-blog
ember install empress-blog empress-blog-casper-template
What’s Behind Ember Observer’s Scores? β Katie Gengler
- Can you score based on accessibility? βπ£
- Can you score if addons are “Octane Ready” or not? βπ£
- Solution: Math β
- Weighted Average
- Smarter checks, New checks and Partial scores
Broccoli Update β Oli Griffiths
- Broccoli.js π₯¦
- In the beginning: ember-app-kit
- Grunt π
- Why Broccoli?
- Simple API
- Flexible
- Broccoli 2.0 π₯¦β¨
tmp/
directory moved outside of the project and more- Update to 32% faster builds
- Just update to Ember CLI 3.5+ and you’ll see these updates
- Broccoli now supports ECMAScript modules syntax
- Adopting TypeScript
No Bad Legos: A Toy Box For Everybody β Howie Bollinger
- Component Driven Development
- But what about accessibility? π€·ββοΈ
- CEO, Stakeholders, Product Owner, QA, Designers, Developers, Customer Experience
- Everything is awesome, because you’re part of a team
- Accessibility is not just a checklist
- WCAG 2.1
- AXE Accessibility Engine
- Chrome + AXE Extension
- “Why can’t this be automatic?”
- Are you there, Axe? It’s me, Ember.
- ember-a11y-testing
- What does this mean for developers and testing?
assert.ok(find('img').getAttribute('alt'))'
😩await a11yAudit('img');
😍
Closing Keynote β Sarah Allen
- What does it mean to be heroic? π¦ΈββοΈβ
- We choose our heros
- Saved the project! Worked nights and weekend! Last minute fix!!!
- But what about the team that quietly ships without fuss?
- Reality is broken
- Change the rules
- Abstraction
- Mechanism which permits the expression of relevant details and the suppression of irrelevant details
- “I wanted to make it easy for people to write good programs” -Liskov
- Recognize when your abstraction is wrong
- Perception !== Reality
- We can’t assess things accurately without the passage of time π
- What we hold to be true is only our closest approximation at the moment
- What is relevant?
- Just-World Fallacy
- The general belief that the world is morally ordered, such that people generally get what they deserve
- Simply holding meritocracy as a value seems to promote discriminatory behavior
- Apophenia: Seeing patterns where they don’t actually exist
- Iterate. Celebrate.
- “Focus on something you can fix”