After night of partying Oleksii can’t find boilerplate in his project. Was it stolen? Or maybe it’s just someone’s sick joke? Let’s deep dive into this mystery!

2. Hi, I’m Oleksii
→ 12+ years in development
→ 7+ years in Wix.com
→ 2+ years in DevEx team

3. My Ultimate Goal is to fire as
much developers as possible

4. Agenda → DevEx
→ Boilerplate
→ ???
→ PROFIT

5. Me, myself and DevEx
What is DevEx? I see it as set of tools and practices that allows
developers to work smarter and not harder.
Developers could focus more on business logic instead of
constant battle with their tools and libraries.
You stop thinking about how to build stuff and start thinking
about what to build.
So DevEx team creates this kind of tools.

6. DevEx in a nutshell
+ =
Develope
r
DevEx

7. Who is our enemy?
Boilerplate

8. What is boilerplate code?
https://en.wikipedia.org/wiki/Boilerplate_code
In computer programming, boilerplate code, or simply
boilerplate, are sections of code that are repeated in
multiple places with little to no variation. © Wikipedia

9. Three-headed boilerplate monster
→ Build time (grunt, gulp, webpack, rollup, vite, w’e)
→ Runtime (libs/features)
→ Project structure

10. Boilerplate related to build tools
We live in world where FED should know about build
tools. You almost obligated to have understanding (at
least high level) of steps that modern project goes
through at build step.
There is huge amount of different libraries and tools.
And you need to configure them. But you rather just
copy paste config from your old project.

12. What we can do with it?

13. Share the shared
Extract config to separated package and use it as
dependency in package.json.
More shared stuff to The God of Shared Stuff ©

14. Is it good solution?
Pros
→ Easy to use
→ Easy to extend
Cons
→ Easy to extend and forget to contribute

15. Boilerplate related to runtime tools
We all use libraries for common tasks. And we have
some preferences. But in scope of company we don’t
need to have more then one library for one common
feature.
And probably you don’t need different configurations
for these libraries too. It still we be a copy paste
anyways.

17. How we can fight it?
Presentation Name | June 2022

18. Feature abstraction
We hiding libraries under feature abstraction (i18next
-> translations, sentry/w’e -> error monitoring). We
publish it as dedicated packages and use them.
There is tricky question here - should we keep all
features as separated packages or should we
combine them into one essentials package
More abstractions to The God of Abstractions ©

19. Is it good solution?
Pros of feature per package
→ Easy to use
→ Focus only on business stuff
Cons of feature per package
→
Feature-like abstraction creates Domain-
Specific Language
Pros of single package
→ Same as for per package
→ Easy to provide new features
Cons of single package
→ You can’t decide what to have in bundle

20. How we did it in Wix?
Some of functionality have feature abstractions,
some have just common configuration. It’s all leaves
in package fe-essentials.
For each our platform we have dedicated package
that combine this functionality into one chunk that
they then provide to apps.

21. Boilerplate related to project structure
At some point you will need to integrate with some
platforms. It could require:
→ Handshake and configuration in runtime
→ Specific shape of exports from main bundle
→ Different bundles based on some rules/ideas

22. New Brave World
You integrating with platform that
requires such architecture from your
app:
Each app consists of components,
each component have bundle with
React components that will be
rendered and bundle with logic that
will be runned in web worker. Your app
can have multiple components.

23. What is our plan to fight 50
different solutions?

24. Convention over configuration
https://en.wikipedia.org/wiki/Convention_over_configuration
Convention over configuration (also known as coding by convention) is a
software design paradigm used by software frameworks that attempts to
decrease the number of decisions that a developer using the framework is
required to make without necessarily losing flexibility and don't repeat
yourself (DRY) principles (с) Wikipedia
We decide structure that will help us to identify main parts of app.
And since we have knowledge of app’s main parts, we can create additional
configurations for our build tools to use that parts (if exists) to separate
bundles.

28. Next big thing in your platform

29. Code generation
We can create root entries for bundles by ourselves,
injecting user code there as imports. It allows us to
wrap our code with our code, so if you like to code
you can write code on top of you code.

31. Combine forces
We can combine solutions for all of our 3 boilerplate
types:
→
Add additional parts related to our conventions into
shared build system configuration.
→
Add some code generation that will create root files
with all needed integration API calls
→ Include your library with feature-like abstractions

33. Let’s go full force
Since we have tool that already know about your
project and have some code generation, we can go
deeper and generate not only code:
→ tsconfig.json
→ Internal files with metadata
→ Types for TypeScript
→ Storybook-related stuff
→ Anything you want, actually, just be brave

34. Going crazy with AST
If you crazy enough, you can also parse AST of your
project to transform code in build time.
It will help secure your job, because no one will
understand wtf that code is doing.

35. Is it good solution?
Pros
→ No bootstrapping nightmare
→
You focus on business logic and you have
most essential tools already available
Cons
→ Even more complicated DSL
→ Tons of abstraction you need to fight with
→ Limitation in terms for extending

36. The worst part is
that someone has
to maintain all
these things

37. So it’s just wet fantasy or what?
Nope, it’s just brief description of project that I
working on in Wix.
And also it’s something really similar to what Next.js
gives you with routing, data fetching and other their
features.

38. Outro
Let’s check main points again:
→ DexEx is important
→ Keep boilerplate in check
→ Great power comes with great responsibility
→ Wix is hiring

39. Q&A

40. Thank You!