Many teams may have a front end developer among their ranks, but besides a title or area of responsibility, it can be difficult to pinpoint the exact craft of front end development. Expertise in web technologies is a good start, but we can't forget the users we actually build for. This talk will examine the impact of the front end on User Experience. I'll talk about how becoming more fluent across more UX concerns like content and user research can help front enders make better decisions, can bring more clarity to our craft, and result in building better experiences for our users.
2. Iām a director of user experience at Shopify and have been working as
a front end developer in Toronto since 2008. Previous to Shopify, I had
been working at a number of diļ¬erent sized agencies.
Monika Piotrowicz
UX Director, Shopify
@monsika
medium.com/shopify-ux
3. A bit more about Shopify - weāre a commerce platform helping merchants sell online, in store, and on mobile. My team designs and builds out our marketing materials on shopify.com
4. as well as features inside of our core product, especially developer-facing features for our APIās
5. and although i have a lot of diļ¬erent disciplines on my team, today āll talk about the front end at shopify - ļ¬tting audience!
6. I just gave a super simple deļ¬nition of front end, but i want to dive into it a bit more because i glossed over a ton of detail there - front end is super complex these days
Today
ā¢ Complexity of the āfront endā
ā¢ Discipline Fluency
ā¢ Taking advantage of UX Fluency
7. ā¢ First, a little bit more about the FED team at Shopify
ā¢ Shopify began over a decade ago but the front end team has been around for less than half that time. When the team got formed, we were starting fro scratch
ā¢ We had to start answering some of bigger questions facing a brand new team
ā¢ Like what stack weād choose, and how we worked with other disciplines, and what our mission and purpose was
8. So letās get started with answering one the ļ¬rst big questions we had to think about
So what is a front end developer?
Itās a bit of a funny question to be asking in front of you, because youāre at a conference called UP FRONT, so I expect each of you has an answer to this because youāre living it day in and day out
Defining FED
Hey UpFront, what do you do?
10. But now, this simple list of 3 turned into a much longer list as languages and capabilities matured.
We have the rise in web applications, no longer just simple sites and at the same time, greater focus on earlier prototyping, more tools to build interactivity, and the rise of compilation and
bundling tools.
WTFED?
ā¢ HTML
ā¢ CSS
ā¢ JavaScript
ā¢ Node/WebPack/Sass/Gulp/PostCSS/jQuery/D3.js/SVG/
CSS Grid/Vue JS/Flexbox/npm/React/Animations/AMP/
PWA/Babel/JSX/OOSCS/BEM/Performance/TypeScript/
Ember/Browserify/Redux/functional/React Native
11. Itās a lot to take in and it can feel very chaotic, especially for teams trying to grow, or hire, or youāre thinking about your own career path.
Just last week i heard someone describe a role as being āfull stack front endā and it really left me scratching my head. We donāt have the language even to describe this role, so how can teams
built, job descriptions well written, career paths deļ¬ned?
So we have to ļ¬gure it out!
chaos
12. FED
Design āBack Endā
So, taking a step back, in that ļ¬rst, simpler model, you might have this range of skills.
And FED happily occupies the middle, right, itās āthe frontā relative to the back, all the stuff that
happens on a users browser, in the client.
16. FEDDesign āBack Endā
#
If we look to the right of this line, we are being much more rigorous with technical decisions - we know what jQuery soup and spaghetti code look like and we know itās hard to work with. So
weāre looking at architecture and patterns, and including things like testing and even writing Javascrpt on the server - no longer the front!
17. #š
FEDDesign āBack Endā
And at the same time, we might be the ones deļ¬ning the animation states of a design based on what we know is possible and performant in a mobile browser. Or building beautiful SVGās,
tweaking their output and using complex Javascript to create amazing interactions.
Front enders might ļ¬nd themselves doing some design!
18. #š
FEDDesign āBack Endā
And so when we look at this whole range, we get into that chaotic state because we wonder, do we need to know it all?
And especially if we spend a lot of time worrying about this right side - about frameworks and tools - How do we decide between different options, what to focus on, and what features we need to
care about?
19. Talking each otherās languages
Discipline Fluency
And so this is where I want to talk about what iām calling ādiscipline ļ¬uencyā
20. Fluency means being able to speak another language - and thatās vital when working with cross-disciplinary teams. When you know enough about that discipline to really empathize, to
understand how they approach problems, and their perspective, you build your own context, and it helps you better communicate your own perspective, because you can ļ¬nd those
commonalities and better describe the distinctions. Itās that common language and even being able to step into that other role, dip your toes in - thatās why I like calling this āļ¬uencyā.
21. If youāve worked on cross disciplinary teams, youāve probably experienced a lack of ļ¬uency at some point, especially because front end does occupy that middle space so you might see it in two
directions.
23. Design āBack Endā
FED
We may be guilty of this ourselves, and can do work to build our own ļ¬uency of areas outside of FED so that we can make better decisions just like we hope others will.
24. FEDDesign āBack Endā
So letās start on this engineering end - I wager a lot of the chaos we talked about earlier actually comes from the fact that we are building more complex applications today than we were 5 years
ago, but we donāt yet have the technical conventions that might exist already in more traditional, longer standing software development - Iām talking principals of computer science and
engineering that, as front end developers, many of us might be less familiar with if weāve spend most of our time working on the front end.
25. FEDDesign āBack Endā
MVC vs Component
Static Typing
Functional vs OOP
Developer productivity
Maintenance
Where 5 years ago, not many front enders were thinking about these types of topics, but these are all long-standing components and discussions in other software development ļ¬elds that have
already been long settled or turned into conventions. So, if we choose to dive in, becoming ļ¬uent in those programming concepts outside of front end might help us make these types of
decisions in the front end as well.
26. This way, perhaps we wonāt be as drawn in to the āļ¬avor of the week toolā debates
27. JavaScript fatigueOr even worse, developing Javascript fatigue - but that dread you might feel when thereās yet another new tool you feel you need to catch up on.
New tools are just diļ¬erent solutions to those really hard problems weāre more recently seeing on the front end, and if we look into other areas of programming, we might ļ¬nd a new perspective
on our own.
28. Great tools and great code arenāt
the end goal
FEDDesign āBack Endā
The same thing can happen with this side of ļ¬uency - closer to the design side
29. Good tooling itself isnāt
the goal
FED
User Experience
Design āBack Endā
And more speciļ¬cally, whatās in between this spectrum of design to Front End - the user experience of what youāre building, and when we spend a little more time here, it can actually bring a lot
of clarity back to this middle.
30. & the impact FED has on.. users!
UX Fluency
And so this is where I want to spend a bit more time - and talk about how we can develop and then leverage a UX ļ¬uency
31. User experience is a person's entire experience using
a particular product, system or service. It includes the
practical, experiential, aļ¬ective, meaningful and
valuable aspects of humanācomputer interaction and
product ownership. Additionally, it includes a personās
perceptions of system aspects such as utility, ease of
use and efficiency.
Itās not just the pixels on the mockup that are handed down to someone to code - itās the full experience your user has, dependent on the user research youāve done, the IA of the site, the
design, content, through to how well it was executed, how speedy it feels in someoneās hand on their device.
32. HTML
CSS
JS
š
š
Fed is really the FRONT Line of that user experience then - because all of that eļ¬ort culminates in the code being served in the browser.
All the planning, design, frameworks, and tools we use are reļ¬ected in the the HTML, CSS, and JS served on the device, experienced while in line at the bank, or relaxing on the couch, or
rushing from one meeting to another. And users just want to complete their task - buy a product, read your article, register for your event.
33. š
And users wonāt care if youāre using isomorphic javascript, that you still havenāt upgraded to React, or that your webpack conļ¬guration is a work of art. They care that your interface works and
they can get where they need to go. They may notice when things go well, but theyāll DEFINITELY notice when they donāt.
35. š š š
šš
But itās a reminder that we DO have to optimize for our users, and all the things theyāre going to want to do - and thatās a huge responsibility.
36. Front end is integral
to User Experience
āØ
FED is integral to UX - itās our JOB to build for users, this is why weāre here. Not to create the best framework, not to learn the ins and outs of one tool or another, but to create value for users.
Our tools help us, we need them, and to those building them, thank you. But for most of us, who consume and who hopefully do contribute back, weāre here to USE those tools, think about our
users, and do something thatāll be useful to them.
37. chaos
The good news, is that when we remember that, we can actually help ourselves get out of this chaos too because by scoping our work to satisfy our users, explicitly, we now have the rules w
need to decide how to spend our time, where to focus, and how to make decisions when it comes to technology. Our users tell us if weāre building the right thing.
38. ā¢ So how do we actually go about doing this? Growing our UX Perspective and putting it into practice?
39. And at Shopify - weāve used this deļ¬nition to actually structure our team.
So rather than being a specialty under engineering or on our own entirely, we group front end purposely as a part of our user experience team - right beside design, research, and content.
41. Design
Front End Dev
Iāve worked in this model before - waterfall - design hands oļ¬ to development which builds without always knowing why. In this process, the ļ¬rst question is āok how on earth do we build thi
thing weāve been handedā
42. Design
Front End Dev
Being part of the UX process means the process looks morel like this - with signiļ¬cant overlap of build while design is iterating so we can inļ¬uence each other.
43. Design
Front End Dev
At these tail ends, encourages design to help out in the ļ¬nal QA and maintaining quality of build, while at the front, having more high level conversations like - Should we build this? Why?
Only when we know that can we eļ¬ectively answer the how
This allows the full team to gain the context from the rest of UX on the āwhyā of our project, and we use this to make better technical decisions. We learn whatās most
important, whatās ok to compromise on, and whatās an experiment we expect weāll iterate on heavily. Each type of work leads to a different technical outcome.
44. This is a picture of a kickoff that happened just las week - this is several different projects teams, all under 1 product domain exploring user journeys together. This is a mix of
UXers from design, content, research, and front end, mixed with some of our support team, data engineers, and back end developers - all talking about user challenges. This is
what that diagram looks like in practice.
45.
46. ā¢ common, shared breakpoints as variables
ā¢ common, shared helpers (to show/hide content at breakpoints)
ā¢ shared mixins to apply media queries
ā¢ JS for responsive images, resize events, etc
ā¢ mobile testing lab
As we see repeat scenarios, itās a strong signal that this might be something important to standardize, so we can start optimizing our toolchain for these known, proven use
cases. Such as:
47. Performance is another area where that close collaboration with design can help us make better decisions
Performance can be a big numbers game, like all these quotes show, but those numbers donāt always tell the whole story.
49. Going back to numbers, these shots hint at something interesting - on top is our speedindex score over the past year for one of our marketing pages
- Itās heading in the right direction, lower is better
- But below, we actually see some resources have increased in size at the same time
- The page is still rendering more quickly because weāve since made a lot of optimizations, even though weāre doing more on the page.
- Both numbers would tell a different story if we didnāt see them together
50. Absolutely have a performance budget, but you have to arrive at that number as a team, not as a rule you have to force others to adopt. Instead of a policing tool, we use it for performance
monitoring and a tool for making informed trade oļ¬s in our UX process.
For marketing pages, every byte counts, so we always strive to have strong rationales, and with that context, the implementation team can better decide on what options we have to explore,
what the performance implications may be, and how these interfaces are experienced in diļ¬erent scenarios worldwide. This helps everyone make more informed decisions.
51. Accessibility
Accessibility is another area thatās very dependent on a healthy dialog between design and front end. This is something front end developers in particular need to be mindful of - we have a hu
impact but itās still not something thatās reached a lot of understanding in our industry, or even tooling to help support it, unless weāre deliberate about it.
52. Accessibility
ā¢ prototyping
So with complex UI, weāve invested the time prototyping options while still in design to vet accessibility and feasibility and work together with design on any adjustments. We understand the
purpose of the design so we can have a more meaningful back and forth during that process
55. Accessibility
ā¢ Common abstractions
This is another instance where we saw repeat use cases which we then decided to abstract into our shared framework. We decided accessibility would be a higher priority and made sure we
focused some of our tooling time there because we knew itād have real impact on users. So the tool is led from UX needs, built to support those needs
56. ā¢ user testing and research
Article: Running Accessibility Testing How-To
AccessibilityAccessibility
This next one is great example of diving in to ļ¬uency in another discipline - Hereās a screenshot from a live user testing session with an experienced screen reader user, organized by a front end
developer. It was a great experience for the entire team and it was driven by the deep curiosity for how real users are interacting with the frameworks weāve built
61. FED
#
Design Engineering
And how itās helped us when we spend time over here - we know our code has to be performant, ļ¬exible to account for unique interfaces, and accessible - and these are no longer abstract
ideas, weāve seen them in action and have helped design the baseline with our entire UX team.
With that baseline set of features weāre opinionated about, that we decided are important, we can think of how to make those features scale, how we maintain them, and how we make them
approachable to everyone on our team
62. FED
#
Design Engineering
And when it comes to tooling, we can leverage this very same chaotic spectrum, because individual FEDs have expertise at points across this entire line, and as a team, if we bake each of those
points into our shared frameworks, then no one person does need to know it all! We roll that knowledge up and itās now available to the entire team.
63. Weāve been building iterative styleguides for a few years now, and each of these facets has helped us do it. We began with sharing basic styles across projects, focusing on responsive and
accessibility behaviours,
64. And soon added in dynamic markup helpers and even an API we built in Rails to spit out the regular HTML and associated CSS classes for complex components. We went to the far right in that
case - front enders were spending a lot of time in a Rails back end, but it was in the service of building a great UX by the same team whoās helped deļ¬ne what great UX even is.
65. Sometimes we learned lessons the hard way - we had a period where we wanted to
modernize our stack with Browserify, but actually quickly saw
it only made maintenance and onboarding harder, without a positive impact on our
users. So we ripped it out and ļ¬t was the right call!
70. But we at least have a rubric, maybe not for predicting the future, but at least how to make decisions and what we might want to focus on. Weāve developed an opinion on whatās most important
to our team, and thatās our users. For us, great code and passing tests will never be enough. These principals have helped guide many of our decisions as a team, and weather the storm
happening in the industry. Your team may have different priorities or a different heuristic for decision making, thatās great - and if not, I urge each of you to pause and think of what yours is, or
could be - because this is what has helped us move past that chaos.
71. Team Growth
These principals also help us here - an area iāve spent a lot of time thinking about.
*We better know how to structure someoneās growth on the team, and even how we hire and onboard. We know weāll have to do more than a whiteboard sorting exercise when meeting someon
new.
72. Continuing to Scale
So whatās next? Still a lot of challenges for FED on the team.
Things on my mind:
How do we continue looking in two directions at the same time, building our ļ¬uency in engineering and UX?
Responsive design was a huge shift for UI, whatās the next major change and how adaptive will our team be? Will our model still work
73. You donāt need to know it all!
ā¢ So coming to an end Iāve talked about how as front enders, we need to build our discipline ļ¬uency over a wide range of topics can help us zone in on what we think is important.
ā¢ I talked about how focusing on UX can actually help us make progress in our FED-speciļ¬c skills, tooling and frameworks
ā¢ The reason why that is, I think, is because that focus on UX takes us outside of our FED bubble and forces us to look at the external impact weāre having. Real users interact with what we build
and thatās why weāre here. So if nothing else, when youāre in the middle of fretting about which direction to go in, which new trend to dive into, consider its impact. Will it make you a better
developer? Will it help you solve a real problem? Will it be a fun exercise youāll enjoy? Each is important, and each will lead to a different outcome.
ā¢ so donāt set yourself up to having to know it all, but instead strive to use what you do know, to make an impac