Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
783 lines (680 sloc) 38.5 KB

EmberCamp Chicago 2019

Don’t Just Put a <div>input On It—Use the Power of the Browser!

Synopsis

The humble <div> is a powerful and flexible element. Throw enough CSS and JavaScript on it, and a can be anything. But should it be? “Semantic HTML” is a method of using elements that best match what your content means and does. But how do you write better markup if you don’t know your options? Join the learning journey to fill your semantic HTML toolkit with the coolest elements you never knew existed. Learn specific elements to use in different scenarios and how to wield the full power of the HTML spec. You’ll write less code while making your pages more accessible and mobile-friendly!

Bio

Marie writes code and poetry, sometimes at the same time. As a front-end engineering enthusiast, she’s currently helping the fine folks at Pingboard build the world’s best org chart software. She is passionate about creating inclusive experiences and understanding foundational web technologies at a deeper level. Talk to her about rock climbing or Texas!

Notes

  • Semantic HTML: Choosing elements based on their meaning
  • Non-Semantic HTML: Choosing elements based on browser styles and/or using <div> for everything
  • Keeps readable layout even if styles are missing or JavaScript is disabled
  • Page is still functional (e.g. forms can submit)
  • Improves accessibility
  • More context with less code
  • Why Not Semantic HTML?
    • Element not supported across browsers
    • Specific UX/UI needs
    • You are willing to implement, test, and ensure accessibility of custom alternative
      • Does a library already exist, can I contribute?
      • Accessible?
      • Browser compatibility?
      • Mobile devices?
      • How hard is it to test & maintain?
Semantic Elements
  • <main>
  • <article>
  • <section>
  • <aside>
  • <nav>
  • <header>
  • <footer>
  • <forms>
  • <fieldset>
  • <legend>
  • <input>
    • Supports many different types -
    • Basic: checkbox, number, radio, range, text
    • Formatted: email, tel, url
    • Date/Time: date, datetime-local, month, time, week
    • Form Controls: button, hidden, image, reset, submit
    • Special: color, file, password, search
  • <select>
  • <option>
  • <optgroup>
  • <output>
    • Unsupported by IE (won't break the site, just won't give you aria stuff)
  • <figure>
  • <figcaption>
  • <video>
    • Format support varies by browser
  • <track>
    • enables captions within <video>
  • <audio>
    • Most browsers don't support <track> inside this element, but if you put <audio> inside <video>, it can work
  • Text Formatting
    • <pre>
    • <code>
      • Executable code
    • <samp>
      • Terminal output
    • <kbd>
      • Keyboard imput
    • <var>
    • <q>
      • Most browsers will add the quotation marks
    • <blockquote>
      • Indented section
    • <cite>
      • Italicizes its content
    • <abbr>
    • <dfn>
    • <address>
    • <time>

Build One Get Two --- Guide For When To Leverage Corber

Bio

Sean Devine is the proud father of 5 children, a lucky husband to his amazing wife Theresa, an active Ember/JavaScript (and Rails/Ruby) developer, and the Founder and CEO of XBE - a Construction Logistics business based in Chicago, IL. He is thankful every day that he bet his company on Ember, and is more excited than ever about where things headed. When not working, or parenting, or programming, Sean enjoys running, cycling, and the NBA.

Notes

"Unless you have a large and sustainable development budget and are competing in a market where the user is the buyer and there is significant competition with feature parity, a hybrid mobile-first app is almost certainly your best option."

Conclusion: Almost everyone should be using EmberJS and Corber!

How did XBE decide on their tech stack?

  • Situation
    • People often have opinions about tech stacks without knowing any context the app will be built in
    • Diverse User Base
    • Broad & Deep Functionality
    • Bootstrapped, Small Team
    • Location-Centric Requirements
    • User/Buyer Dichotomy
    • Compulsory Usage
  • Objective
    • Maximize: Leverage
    • Constraint: Location Tracking Requirement
    • Constraint: Bootstrapped Budget
  • Options
    • Mobile-first web app with native tracking apps
      • Viable
    • Hybrid mobile-first app
      • Viable
    • Multiple "native" apps with feature parity
      • Shockingly, this is the default choice of most companies
        • Featuresets almost never stay in sync across platforms
      • Non-viable: Too expensive
        • Larger/venture-backed companies can trick themselves into thinking this option is best b/c cost isn't a constraint
    • Mobile web only
      • Non-viable: Inadequate location tracking
  • Decision
    • Mobile-first
    • Web-first
    • Responsible design
    • Distributed as a native app
  • Development
    • Build an app that "feels" right on a phone is the biggest challenge
    • Corber config and build process feels opaque and magical
    • Native app release process is cumbersome and manual
    • If you build a solid mobile-first web app with Ember, the native apps come for free
  • Outcome
    • Maximized leverage
    • Differentiated functionality
    • On budget, low risk
    • Significant option value
  • Implications
    • Know your situation and objective
    • Accept your constraints
    • Understand options in terms of your context
  • Maturity: Accepting What Is True And Acting Accordingly

Note: This talk had lots of fun asphalt-related trivia not captured here.

Worker Power!

Synopsis

Web workers bring a new layer of capabilities to web applications. Because workers operate on their own threads, they provide a way to perform processor-intensive tasks without affecting the responsiveness of an application. This talk will explore the different types of workers, including service workers and shared workers, and how to make the most of them in your Ember applications. We'll discuss the capabilities available to workers and explore different use cases, including progressive web apps.

Bio

Dan is on the Ember.js core team, an editor of the JSON:API spec, and the creator of Orbit.js. He consults through Cerebris, the company he co-founded, and their partner Tilde. He loves to travel and hike with his family and fluffy dog.

Notes

"This really is a talk about the power of organized labor"

  • Web Workers
    • Dedicated
    • Shared
    • Service
  • Main Thread: All processing done on the web happens here by default
  • Workers are the only threading primitive on the web
    • Offload processing work to workers so that it can occur in parallel
  • "Concurrency is about dealing with lots of things at once. Parallelism is about doing lots of things at once." - Rob Pike (Go Creator)
  • What happens when we exceed the limits of concurrency on the main thread? Jank.
    • Things seem off when apps drop below 60 fps, meaning browsers need to repaint every 15 ms
  • Perceived challenges to using workers
    • New and unproven? No, they've been around since 2012
    • Lack of browser support? No, widely supported by browsers
    • Lack of capabilities? No, give access to nearly every browser API
  • Real challenges to using workers
    • Awkward to use
    • Awkward to test
    • Lack of FE framework support
    • All challenges are developer experience problems
  • Characteristics of all workers
    • Async communication
    • No shared memory
    • Controlled lifetime
    • Access to browsers APIs
    • No direct access to DOM
  • Dedicated Workers
    • Global browser support: High 90s percentile, even IE/Edge
    • Supports ES modules
    • Demo: Calculate fibonacci sequence of numbers in worker so that UI is not blocked
  • Shared Workers
    • ~36% global browser availability: Not yet supported in safari/edge/IE
    • MessagePort
    • Same demo, running in multiple browser windows
      • Data synced across window via the shared worker
      • Each window has its own store, but they're communicating via shared memory of the worker
      • Built with OrbitJS & EmberJS
  • Service Workers
    • Popular for building complete offline experiences
    • Global browser support: High 90s percentile, no IE support
    • Progressive Web App (PWA) Checklist
      • Site is served over HTTPs
      • Responsive
      • App URL's load while offline
      • Add to home screen
      • Fast first load (because some assets are cached)
      • And more ...
    • Can even customize response to fetch
  • DX Improvements
    • ember-workers (Upcoming addon!)
      • Uses rollup under the hood for tree-shaking, ES module support across all browsers, etc
      • Makes workers accessible everywhere
    • promise-worker
      • Problem: Evented async can get awkward
      • This NPM package wraps Evented code in promise syntax for async/await
    • testing

Compiling Ember

Synopsis

Compilers have a reputation for being esoteric and intimidating. But they don't need to be! A compiler is just a program that writes programs. This talk will be a practical tour through the Embroider build system that also teaches compiler concepts along the way. With the power of multi-pass compilation, Embroider can take a long-lived, conventional Ember app and give it lazy loading, code splitting, and tree shaking. All without modifying the app's own code.

Bio

Ed is a member of the Ember Framework core team. His open source code is running on mainstream gaming consoles, major social media sites, and hordes of enterprise applications. His consultancy, Polynomial LLC, leads ambitious software projects for a diverse group of businesses and nonprofits, and he is a lead developer for the Cardstack Project. https://cardstack.com

Notes

  • A compiler is a program
    • All programs have an input and output
    • A compiler's input and output are both programs
      • Input: Language A, Output: Language B
      • Input is often easier for humans to read, output is often easier for machines to read
        • Decompiler swaps these
    • Self-hosting Compiler: Input is the same or similar language to what the compiler is written in itself
    • Transpiler: Input/Output are very similar
  • Static: Facts you can know about a program before you run it
  • Dynamic: Facts you cannot know about a program before you run it
  • Compiled preserve the semantics of the input language to produce the same output in the resulting program
  • Often the input language cannot produce an output itself without being compiled first
    • Example: Ember app compiles to dist/**, browser cannot run the Ember app itself
    • Conceptually, however, your app has both an input and an output, regardless of the implementation details
  • Implementor's Trap: Neglecting the abstract semantics of your language, because you know "how it really works".
  • Does Ember have clear abstract semantics? Overwhelmingly, yes!
    • Follows standards
    • APIs are implemented very carefully
    • One area in particular needs improvement: Modules
    • Ember has been rewritten into modules over time, but we're not all the way there yet. The way we use modules today doesn't take advantage of everything modules were designed for.
      • Ex: We don't have a static meaning that goes from a ModuleSpecifier to a specific module in a specific package.
  • ModuleSpecifier
    • ECMA spec leaves this up to implementation, not codified by JavaScript the language
  • Module imports must be known before program is run
    • No dynamic names for imported files
    • No conditional imports
    • Everything about import is designed to be static
    • For dynamic things, there's import()
  • RFC: V2 Addon Format (Embroider compatibility)
    • This RFC defines a new package format that is designed to make Ember packages (meaning both apps and addons) statically analyzable and more compatible with the rest of the NPM & Javascript ecosystem. This RFC is the first step in stabilizing Embroider as our next-generation build system.
  • Embroider: Multi-Stage Compiler
    • Takes multiple intermediate compilation steps before final output is generated
    • Allows you to simplify the input over time so that very powerful low-level optimizations become possible in the final output
    • Target a well-documented, stable shared solution language instead of trying to compile all the way to what the machine will read
    • Workflow: Ember App & Addons -> @embroider/compat -> V2 Ember Packages -> @embroider/core -> Plain JS/CSS/HTML -> @embroider/webpack -> Browser-optimized JS/CSS/HTML
  • Stage 1: Compat
    • Runs custom broccoli trees
    • Moves files so they match their import paths
    • Recaptures modules that try to escape their package
    • Applies custom preprocessors
    • Generates @embroider/synthesized-vendor package to represent legacy non-package-scoped contents as a v2 package
  • Stage 2: Core
    • Synthesizes JavaScript entrypoints that import the required modules to boot the app
    • Resolves components and helpers and emites import statements for them at the top of each compiled template module
    • Uses dynamic import() to express potential split points like routes and lazy engines
  • Stage 3: Optimized Packaging
    • Delegate to a standard JavaScript build tool
      • Could be rollup, parcel, etc
      • Flexibility to choose future tools that haven't even been written yet!
    • Give it total freedom to decide how our entire module graph should be optimized for web delivery
  • Benefits
    • Complete pull-based builds
    • Faster builds
    • Use dynamic import() anywhere for arbitrary code splitting and lazy loading
    • Automated route-aware code splitting
    • Import anything directly from NPM, statically or dynamically
      • [ember-auto-import](https://github.com/ef4/ember-auto-import) is a polyfill for Embroider's third-party package import, but it doesn't work with Ember code
  • Keep moving forward. No big app rewrites. Ember <3

Steady State With Ember Octane

Synopsis

Ever wondered where your component state went or where it came from? ​​In this talk you will learn how arguments, decorators and tracked properties make state management of your component built in Ember Octane easier than ever before. In comparison with patterns known from traditional Ember apps, you will learn how to transform your modern components to predictable and future-proof building blocks of your application.

Bio

Jessica is a member of the Ember Learning Core team and a software engineer at simplabs. She is an editor at The Ember Times and organizes the Ember Berlin meetup. She is passionate about open-source, CSS, art and comics.

Notes

  • Stateful systems remember preceding events
  • Types of State in JavaScript Apps: Local, Closure, Object, Global
  • State Management in Ember apps is about Object State
    • Service State
    • Controller State
    • Component State
  • Managing Ember Component State
    • Properties
    • Arguments
    • Lifecycle Hooks
    • Event Handling
    • Dependency Injections
    • Data Loading
    • Components own state and methods to manipulate local and external state
  • State management can be hard!
  • Common Symptoms of Hard to Manage State in Components include...
    • Cyclical data flows
    • Race conditions
    • Overall unpredictable state changes
    • Low performance
  • Predictability for Initial State in Components
    • It's not always clear where a property was set
      • Was it passed in or defined in the component js (or both)?
    • Octane: Named arguments bring clarity
      • this.args
      • Data Ownership: "Is it an argument or not?"
      • Getters make it easy to have default values without clobbering them with arguments
  • Predictability component state over time
    • Ambiguity about where properties are updated
    • Holding & Loading of Data: Methods for Modifying Owned Data
      • Automatic separation of concerns: Data management vs Presentation
      • Other communities call this "Container" and "Presentational" components
    • Octane: Enforce "Data Down, Actions Up" (DDAU) with Argument Immutability
      • Pass down arguments and actions
      • Send updated values up via actions
      • No ambiguity about where properties are updated
    • Modifying application-wide state with Components
      • Service: Owner of application state
      • Inject service into target instance: Component, Controller, or another Service
    • Encouraged DDAU facilitates state management
      • Encourages directed acyclical graphs (DAG) for data flow
      • Easier separation of concerns
      • Prevents accidental overwrites of computed properties
  • Predictability of Component State through API Clarity
    • Octane: Glimmer components provide leaner, more intuitive API
      • 11 Lifecycle hooks removed
      • 29 event handlers removed
      • 1 constructor added
      • Single location of hooks
    • Glimmer Component RFC
  • Managing Component State for Optimal Performance
    • Template-Only Components
      • High-performing presentational UI
    • Localize Component State for Efficient Garbage Collection
      • Ember is good at cleaning up components, so you can ensure state doesn't stick around when it's not needed
    • Avoid Repeated Rendering
      • Reduces re-renders to the bare minimum
      • @tracked (RFC)
  • Experience the Future of Steady State with Ember Octane!

Navigating Towards Stronger App Architecture Using Maps

Synopsis

Like the cities they represent, interactive maps are complicated feats of engineering. They are resource-intensive microcosms of state management, requiring special data formats and styling specifications. When the needs of an application go beyond showing points on a map, cartographic applications can quickly grow unwieldy and unsustainable. Throw moving targets, messy data, and squeezed timelines into the mix, and you've got an enormous component that does everything – poorly. This talk discusses the latest mapping technology and approaches to building better components - map-based or otherwise.

Bio

Matt Gardner is a software engineer for the NYC Department of City Planning. Originally an urban planner, he pivoted into application development after seeing a gap in need for better software in government, specifically in the public advocacy realm. He and his team, Planning Labs, rebuilt the City of New York's digital zoning and land use map using EmberJS.

Notes

  • We use maps every day
  • Maps are used for more than just navigation
  • Spatial relationships are important
  • We can map social-political issues
  • Basemap
    • Static data that is always present
  • Data layers
    • Polygons
    • Lines
    • Points!
  • Modern Technologies
    • ArcGIS
      • Early digital mapping tool
      • Couldn't be used on the web
    • MapQuest
      • Web service launched in 1996
      • Very slow
    • TILE
      • Loads much faster
      • "Slippy maps"
      • Used by Google Maps, Open Street Map, etc (NOT EmberMap LOL)
      • Serve tile information as vector data
      • There are a lot of different ways to project a spherical shape onto a flat surface
        • Assume the world is a square
        • Start with one tile, double the number of tiles every level of zoom
    • GeoJSON
      • Format for encoding geographic data structures
    • Carto
      • Location services
    • MapboxGL
      • Canvas-based JS library
      • Accessibility Controls: mapbox-gl-accessibility
  • ember-leaflet
  • ember-mapbox-gl
  • Building a map component
    • Started very long, one component
    • Extracted smaller components as needed
    • Don't abstract too early, you might not predict the evolving design correctly
  • Testing
    • Elaborate Stub
    • Tricky: MapboxGL is event-driven
    • Don't mock what you don't own (but it worked really well for us in this case)
  • Map users seldom, if ever, question these authorities, and they often fail to appreciate the map's power as a tool of deliberate falsification or subtle propaganda.
  • Mapping can be used deceptively
    • Breaking data into more/less segments
    • Stronger language

Content Choreography: Meaningful Motion In Ember Apps

Synopsis

We naturally invent stories to explain phenomena we can't understand. If your app leaves changes "vague," users will make up explanations about how it works. Some developers see animation as a fancy gimmick to slap on at the end of a project. Others want to use it in a helpful way but aren't sure how. Both will learn that animation is a meaningful tool and how to use it effectively to reduce user error. In this talk, we'll avoid getting in the weeds with addons, JS libraries, or CSS frameworks. Instead we'll learn the ways that animation can aid your users and see practical UI examples.

Bio

James is a senior developer with more than 10 years of front-end experience. If you let him talk, you're liable to get an earful about modular styles, accessible pages, cool CSS tricks, or random restaurant reviews (especially if pizza or BBQ are involved).

Notes

  • Why do we animate elements?
    • Set a client's site apart
    • "Make it pop!"
    • Show off dev skill
    • Best Reason: Communicate Meaning About The Content
  • We make up stories
    • Whenever things happen, we automatically invent a narrative to explain those events
    • We often do a bad job: "post hoc ergo", "propter hoc" aka "Correlation does not imply causation"
    • Example: Athletes develop rituals based on random behavior they did while having a great performance
    • Users develop digital rituals as well, based on trained behavior from past experiences
  • Animation tells the right story
    • When we animate an interface correctly, we make sure users don't make up the wrong story
  • Show which pieces of content deserve the user's attention
  • Indicate that the app or element is busy with an async action
    • CSS can be keyed to aria-busy="true"
  • Show relationships between elements
  • Show the source of some content
  • Show the destination of some content (e.g. "Add to Cart" button)
  • Video: The Illusion Of Life
  • Easing Curves
    • Defines acceleration pattern for animations
    • animation-timing-function
      • linear
      • ease-in
      • ease-out
      • ease-in-out
    • cubic-bezier
      • Custom function applying specific coordinates to the easing curve
  • Not all properties work well when animated
    • Best: opacity, transform
    • Decent: [*-]color
    • Avoid: margin, padding, width, height, top, right, bottom, left, font-size, border, box-shadow
  • Respect Your Users
    • Users can indicate they don't want motion: @media (prefers-reduced-motion: reduce)
    • Nuclear option: Turn off everything
    • Lighter option: Set timings (delay/duration) to 0
  • If an animation is causing problems, remove it. The animation is not more important than your users being able to get through the app.

May I Ask a Question, Live!

Synopsis

As Ms. Frizzle says, "Take chances, make mistakes, get messy!" Join two Ember developers as they livestream Ember Q&A from the Stack Overflow, the Discuss Forums, and the audience. In this activity, Jen and Preston will teach strategies for leveling up the skills necessary for positive interactions and and get answers to your own burning questions!

Bio

Jen Weber

Jen Weber is a member of the Ember Core Team. She works at Cardstack, making Web 3.0 accessible to everyone and empowering new creators. (she/her/they/them)

Preston Sego

Preston Sego is an Open Source Enthusiast. He has a side project, emberclear.io, which is both a place to explore new features of the web platform, and help others learn Ember and frontend testing patterns. He works at CrowdStrike, helping build interfaces for the cloud-native endpoint protection platform built to stop breaches.

Notes

  • 23,351 #EmberJS Questions on StackOverflow
    • 66% of questions asked within the last 7 days are "unanswered"
    • 27% of questions all-time are "unanswered"
    • Some frameworks actually have worse statistics (React/Vue/etc)
  • Components come in many shapes and forms, but they all need a template
    • You can now generate "glimmer components" in Octane
  • Decorators are not Ember-specific
    • They allow you to label your code to give it additional functionality
  • Angle-Bracket Notation
    • Reference this to access properties
  • In Ember 3.14, reference @model in the route template to access the object returned from the model() hook - @rwjblue
  • In Octane, component arguments are immutable
    • Will throw an Ember Error
    • Arguments object uses the Proxy API
    • Argument immutability is not deeply-nested, operates more like const
  • Ember Guides provide cheat sheets comparing classic Ember patterns with Octane patterns
  • @tracked
    • Decorator that marks things that need to be watched for changes
    • Anything using the tracked property will update automatically
    • A tracked property on the Route object will not update the Route template, because that template is actually backed by a Controller - @rwjblue
  • Try to engage on StackOverflow
    • Good questions:
      • Provide extensive details
      • Explain what's been tried already
    • Good answers:
      • State what version it applies to
      • Links to docs
      • Copy example code into the answer (don't just use a gist)
      • Be gentle and kind
    • Upvote when you see a good answer
    • Comment on questions/answers

Questions

  • How to send action to route? (2-year-old StackOverflow question)
    • @action decorator
    • Canonically, we would put actions on the controller and pass them down to components
    • Question: Why can't we use the action helper with a string in the top-level route template?
      • Answer: You can!
  • How is Octane different from AJAX?
    • Octane is an edition of Ember
    • AJAX is a form of asynchronous data fetching, now superseded by fetch
  • Will Embroider be ready for Octane?
    • No, but you can experiment with it during development
    • It will be a primary focus for the community after Octane ships
  • How do we promote Ember?
    • Talk about our success with Ember
    • Talk about how stable our work lives are because of Ember
    • Ember provides incremental improvements
      • We've all saved a lot of time through Ember's upgrade process
      • Steady, constant, incremental improvements over time instead of a "Big Bang" rewrite
    • Octane's existence is proof that it's time to give Ember another look
      • Delivered without a major release or breaking change!
    • Give talks at local JS meetups
      • Octane is all native JavaScript
  • When will angle brackets support nested components?
    • Supported as of 3.10ish, there is also a polyfill: [ember-angle-bracket-invocation-polyfill](https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill)
  • When will routeable components land?
    • If you've been holding out for this feature, let it go and adopt the features that have replaced this concept, such as the routing service
  • How do you go from intermediate to expert Ember developer?
    • Write lots of code
    • Make mistakes
    • Ask for help
    • Participate in Open Source
      • Opportunity to learn from more experienced people
    • Dive into Ember's source code, look at stack traces

Mocks, Spies, and Timers - Oh My!

Synopsis

The testing world is full of ways to simulate data and user interaction. Mocks, spies, stubs, and timers all allow you to focus your tests and remove unwanted interference. Maybe you've tried to set them up and been overwhelmed or maybe you've never even heard of them. Core concepts can help developers frame their thoughts about testing and structuring tests. We'll explore those core concepts and look at how to leverage existing libraries like Sinon.js, Pretender.js, and even ember-cli-mirage, with examples to make your test suite more stable and reliable.

Bio

Lisa is a senior engineer at DockYard, helping large clients integrate Ember.js at scale with a commitment to quality. This commitment has led to a passion for testing. She has 20 years of web development experience ranging from consulting and product development, to helping nonprofit institutions in both paid and volunteer capacities.

Notes

  • Focus on thoughtful tests rather than a high quantity of tests
  • Unit Tests are useful for testing pure functions where the return value is only determined by its input values, without any observable side effects.
  • Container Tests test the functionality around an Ember class instance by setting up the application's container.
  • Rendering Tests test the interactions between various parts of the application, such as behavior between UI controls.
  • Application Tests test user interaction and application flow in order to verify user stories or a feature from an end-user perspective.
  • SinonJS
    • Spies: Record information about when functions are called
      • Data: number of calls, arguments, errors, etc
      • Can be created anonymously or called on an existing function on an object
      • Use when you want to verify a callback or ensure a function was called with specific inputs
    • Stubs
      • Mock the output of a function
      • Also has properties of spies
      • Use when you need to simulate different responses from systems that are complicated to initialize
    • Fakes
      • Combines stub and spy behavior only for anonymous functions
      • Use when you can't remember whether to use a spy or stub
    • Mocks
      • Combines stub and spy behavior with pre-defined assertions
      • Use if you like to set up your assertions at the beginning when you define your behavior
    • Timers
      • Synchronous implementation for testing async behaviors (e.g. setTimeout)
  • Using Sinon in Ember
    • ember-sinon
      • Provides the sinon package as an import
    • Solutions for handling sinon setup/cleanup have evolved over time:
      • ember-sinon-qunit -> ember-sinon-sandbox -> ember-sinon-sinoff -> ember-sinon-qunit
        • Use [ember-sinon-qunit](https://github.com/elwayman02/ember-sinon-qunit) moving forward
      • ember-sinon-chai -> ember-cli-chai (no cleanups/test setup, needs sandbox)
  • TestDouble.js
    • Simpler, opinionated mocking library
  • Jest
    • Chai-like assertion syntax
    • Automatic mocking
    • Manual mocking
    • Snapshot tests
    • Can include test coverage
    • Note: Does not run in browser
  • There's a lot of commonly accepted wisdom around mocking that isn't always applicable
  • Don't mock what you don't own

Modifiers: the Good and the Camp

Synopsis

During the rush up to Ember Conf and the formal release of Ember Octane, Element modifiers seemed to magically appear through a series of blog posts that identified a brand-new base tool for Ember applications. Since they are still so new: When should we use them? How should we use them? When should we not use them? In this talk, we'll explore a number of use cases and explore how to model them using modifiers. Some good; some ambiguous; some plain silly.

Bio

Spencer is an Engineering Manager for Movable Ink in New York City. He has been building applications with Ember for over seven years and has been experimenting with use cases for modifiers ever since they were formally announced in February. Outside of work, you'll find me blocking people's view at Broadway shows, walking my obnoxiously happy dog, or watching good movies.

Notes

  • Camp: "It is the love of the exaggerated, the 'off', of things-being-what-they-are-not."
  • "What it does is to find the success in certain passionate failures."
  • "The whole point of Camp is to dethrone the serious. Camp is playful and anti-serious."
  • Concept
    • A small reusable tool... (there was more, slide moved too quickly - please add)
    • Example: Autofocus
      • Only works on initial Page Load, which is problematic in SPAs
      • element.focus() needs to be fired instead
    • Cannot be expressed by HTML alone
      • Does not run service-side in Fastboot
  • History of Ember Modifiers
    • {{action}} - attaches event listeners to elements
      • Supports an on="EVENT_TYPE' argument
    • {{bind-attr}} modifier to set element attributes
      • Deprecated in 1.11, Removed in 2.0
    • Autofocus before Modifiers
      • Could have used didInsertElement to call element.focus()
      • Could have written a mixin
      • Octane: Create an action that calls element.focus(), use did-insert modifier to trigger it
  • Creating Modifiers
    • setModifierManager API
      • Not recommended, lots of low-level stuff to wade through
    • ember-oo-modifiers
      • Recommended
      • Autofocus: Create a modifier class that implements didInsertElement to call element.focus()
        • Usage: <input {{autofocus}} />
        • Custom: <MySpecialInput {{autofocus}} />
          • Inside the component: <input ...attributes />
    • ember-functional-modifiers
      • Recommended
  • Good Use Cases
    • draggable
      • Accept a callback for the updated position: {{draggable this.updatePosition}}
    • track-on
      • Fire tracking events
    • flyover
      • Tooltip/popup modifier
      • launch-pad - Tether to the element that the flyover in anchored to
    • did-resize
      • Fire action when the element resizes
      • [ember-did-resize-modifier](https://github.com/gmurphey/ember-did-resize-modifier)
    • focus-trap
      • [ember-focus-trap](https://github.com/josemarluedke/ember-focus-trap)
  • Campy Use Cases
    • scoped
      • Borrowed idea from ember-provider (Not really maintained, doesn't work in glimmer)
      • Based on React/Redux's Provider concept
      • Problems:
        • Wouldn't work with wormholes
        • Another global state?
    • split-view
      • Turns all child elements into resizeable split views
      • [ember-split-view-modifier](https://github.com/OAGAnalytics/ember-split-view-modifier)
        • Uses Split.js
      • Problems:
        • Unmanaged elements
        • Conditional elements don't work
        • Component-based API could be better
    • predict-on
      • Similar to on modifier, but with predictions
      • guess-js
      • Fun idea, "I have no idea how to do this"
  • Very Campy Use Cases
    • ón
      • Fire action randomly 90% of the time
    • expletive
      • Draws box around mis-aligned elements
    • pointy-cursor
      • Keeps cursor oriented toward the clickable element at all times
  • If someone tells you "this is a bad idea", say "no, this is a campy idea"
  • If you find yourself saying "this is a bad idea", find the fun in people's passionate failures.

Keynote: Redefining Risk Taking

Bio

Olivia Liddell is a Cloud Training Specialist at Cloudbakers. She is a former Chicago Public Schools teacher who now specializes in technology training and change management. She is passionate about teaching, mentoring, and distance running.

Notes

  • What does risk taking look like?
    • Google Image search shows a lot of images for "risk taking"
      • Leaps of faith across a chasm
      • Tightrope walking
    • Risk taking doesn't have to be a big leap across a canyon
      • Take small steps forward
  • I want it all to work right away, no mistakes
    • Really, I just don't want to feel inadequate
  • Taking smaller steps makes it easier to see your path
  • Taking small steps forward is still moving forward
  • Trying something new does not take away from who you already are
  • Growth Mindset
    • Shift away from a "Fixed Mindset"
    • Share and reflect on both your successes and struggles
    • View your struggles and setbacks as opportunities to teach others
    • Seek out positive and encouraging communities
  • Risk Taking:
    • Taking small steps forward
    • Enhancing your current skill set
    • Shifting towards a growth mindset
  • Live Bravely!

Closing Comments

Notes

  • Thank you for coming
  • ~100 attendees, over half from outside of Chicago
  • Thank you to our sponsors
  • Trek did such a great job as emcee! (there were flowers)
  • We had a lot of fun putting this event together, but these events are a lot of work!
    • Please give us feedback: Whether you enjoyed it or not, we need to hear from you so we can make future years even better.
    • We won't judge you regardless, we appreciate everything you tell us about the event
  • Please let speakers know if you liked their talks, talk to them about those topics
  • After Party!
You can’t perform that action at this time.