Thoughts on Ejecting from a Framework

Huiqi and I talk about the notion of ejecting from a framework using React as an example and I express my problems with the concept.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : uh let's talk about the eject
00:02 : okay
00:05 : okay so i just created a react app yarn
00:08 : start because but yeah we should see an
00:11 : app yeah there we go
00:13 : so we have this source folder has app.js
00:16 : index.js and a few other things
00:19 : there's also a public folder
00:21 : has your you can put assets in here
00:24 : basically
00:25 : other than that pretty clean but there's
00:28 : very little stuff here and i i like that
00:31 : but now if i do yarn eject
00:34 : yeah
00:35 : they have to
00:36 : you're really sure you want to do this
00:39 : this action is permanent okay yes i want
00:42 : to do it
00:45 : okay done all right
00:48 : um
00:49 : okay so the
00:51 : two folders have been created the config
00:54 : folder and the scripts folder okay the
00:57 : scripts folder has these node.js scripts
01:01 : that replace
01:03 : the
01:04 : start test and build commands okay
01:07 : because normally you do npm start
01:10 : npm run build and npm test
01:14 : right in turn those who run react
01:17 : scripts start react scripts
01:19 : build and react scripts test
01:22 : and now instead of going through react
01:24 : scripts they're like i gave you the
01:26 : scripts you run these
01:28 : you can change you can change them if
01:30 : you want it's all up it's all new now
01:33 : um
01:34 : and um but but it still uses some of the
01:38 : modules to react scripts
01:41 : it depends on
01:43 : and all the configuration files are here
01:47 : in particular this is the webpack
01:48 : configuration
01:50 : it's 758 lines
01:53 : of configuration there's also
01:56 : webpack dev server configuration which
01:58 : is just configuring it when you run the
02:00 : local dev server
02:02 : after this happens so you can still
02:06 : do things normally but it's been rewired
02:09 : to call that script that it gave you
02:12 : instead of going through their framework
02:14 : okay but it still should work the same
02:18 : but now you're not dependent on the
02:19 : framework anymore and if you want to do
02:21 : customization of the webpack config you
02:23 : go in here and change things if you just
02:25 : want to make a web app you're probably
02:27 : going to stick with the default so in
02:29 : what case you need to change this
02:32 : because that's my first question like
02:34 : who who will go this route
02:36 : yes and
02:38 : in my case is i want like a common
02:42 : repository for code
02:44 : that lives outside of this project
02:47 : because i want some code that can be
02:49 : shared amongst three different projects
02:52 : and it turns out that
02:53 : the their default setup just disallows
02:58 : the inclusion of any file that's outside
03:01 : of the project directory they actually
03:03 : have
03:04 : a module in their webpack that's
03:06 : explicitly disallows it it's called the
03:08 : module scope plugin
03:11 : so the first thing you would do is you
03:12 : i'm gonna
03:13 : get rid of that
03:16 : just so that it would it would take
03:19 : modules that are outside of the project
03:21 : directory okay so that's one example but
03:25 : then i also wanted to put in typescript
03:27 : aliases
03:29 : i i forgot like when i was
03:31 : creating the app i should have set
03:33 : typescript and i didn't do that
03:36 : but um yeah but if i had
03:38 : then what it would actually do
03:40 : it actually overwrites the typescript
03:42 : file every time it starts the dev server
03:45 : okay so you actually can't make changes
03:48 : to the typescript config file
03:51 : interesting i feel like angular gives
03:53 : you more
03:54 : leeways too
03:56 : i think that's true and and that's like
03:58 : um as a designer of a library or a
04:01 : framework or there's a philosophy that
04:03 : you can choose going back to our open
04:05 : close principle
04:06 : we can either
04:08 : choose to add more extension points
04:12 : so that there are more ways
04:14 : to customize your framework but the more
04:18 : extension points we add the more
04:20 : complexity we add as well as a designer
04:23 : of the framework you could choose to be
04:26 : very conservative about adding extension
04:28 : points
04:29 : or very liberal about adding extension
04:32 : points
04:33 : well i guess the thing about the
04:35 : extension point is
04:36 : if you want your thing
04:39 : to not be buggy then you probably will
04:41 : like to put in like error handling or
04:44 : constriction so that however you
04:46 : configure your extension point you don't
04:48 : actually break the stuff
04:50 : because for a person that don't totally
04:53 : understand how this webpack config works
04:56 : they might put in a setting that just
04:58 : doesn't work
05:00 : for whatever reason so then it will
05:03 : require either this person to know the
05:05 : bottom layer of the thing
05:07 : or you have to give them a good error
05:10 : message so that they know hey this
05:12 : doesn't work because of this so that i
05:14 : can do this but the more extension point
05:16 : you have the harder
05:18 : it is to just do that
05:20 : yeah the react scripts team don't really
05:23 : want this maintenance overhead
05:26 : associated with having to maintain these
05:29 : extension points therefore they close it
05:31 : off but they give you an escape hatch
05:35 : which is the eject button
05:37 : it gives you the escape hatch to say hey
05:39 : if you want to customize we're not
05:42 : responsible but basically they don't
05:44 : they don't want to have to support those
05:47 : use cases
05:48 : yeah i think that makes sense yeah so
05:51 : they just give you the control and then
05:54 : you are responsible it's just like
05:56 : customizing a car
05:57 : once you customize you don't know how
06:00 : whether it will work out or not but the
06:02 : car company will not support
06:05 : oh exactly
06:06 : exactly it's like it's you just voided
06:09 : the warranty
06:10 : by by unscrewing the
06:14 : cover
06:15 : of your device
06:17 : um so that that's the analogy they're
06:20 : they're
06:21 : going for yeah that's exactly what it is
06:24 : the main thing about this that gives me
06:27 : like a bad taste in my mouth is
06:29 : it's a mechanism for closing the code
06:32 : it's open source but they're
06:35 : using this mechanism
06:37 : to close off the code
06:39 : even though it's open source
06:41 : they don't want you to touch it and and
06:43 : yeah you can
06:44 : they still gave you a way
06:46 : out of it but the the sort of you can't
06:50 : go back it's sort of like the mafia like
06:53 : once you're out
06:54 : you're not
06:56 : under
06:56 : my protection anymore
06:58 : and then god forbid something happens to
07:01 : you
07:03 : i'm not responsible for it
07:06 : like like there's this
07:07 : thinly veiled threat that counters the
07:10 : notion of open source in a way for me
07:13 : because open source is meant to be like
07:15 : hey everything is open and this is a
07:18 : mechanism for closing it