SDC Decomposition Sprint 1 #1295
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for cyf-tracks ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for cyf-common ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for cyf-sdc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for cyf-piscine ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for cyf-curriculum canceled.
|
✅ Deploy Preview for cyf-programming ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for cyf-itd ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for cyf-launch ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
illicitonion
force-pushed
the
sdc-decomposition-sprint1
branch
from
4fbbd8f to
d53add3
Compare
SallyMcGrath
requested changes
Jan 22, 2025
|
|
||
| Note: Your backend expects the quotes to be submitted as JSON. This means you will need to use a `fetch` request from JavaScript to do the POSTing. | ||
|
|
||
| You can't just use a `<form method="POST">` tag because that would post the information in a different format. (It would also redirect the user to a page which just says "ok" after submitting the quote, which isn't a great user experience!) |
There was a problem hiding this comment.
I don't think they know what POST is really. Do we want to bring anything in from servers module or no?
|
|
||
| If a user tried to add a quote and the `fetch` failed (perhaps because the backend wasn't running), or the response said there was an error, we should give the user some feedback so they know something went wrong (and maybe what they should do about it). | ||
|
|
||
| Now that our backend allows users to post quotes, we may want to restrict what can be posted. |
There was a problem hiding this comment.
Suggested change
| Now that our backend allows users to post quotes, we may want to restrict what can be posted. | |
| Now that our backend allows users to post quotes, we want to restrict what they can post. |
|
|
||
| Now that our backend allows users to post quotes, we may want to restrict what can be posted. | ||
|
|
||
| For instance, we probably don't want to let people post quotes which are empty. |
There was a problem hiding this comment.
Suggested change
| For instance, we probably don't want to let people post quotes which are empty. | |
| For instance, we don't want to let people post quotes which are empty. |
You can stop hedging. We never want to publish raw user inputs. We can just say this.
|
|
||
| For instance, we probably don't want to let people post quotes which are empty. | ||
|
|
||
| We may want to do some validation of the input our users give us. |
There was a problem hiding this comment.
Suggested change
| We may want to do some validation of the input our users give us. | |
| We definitely need to validate the inputs our users give us. |
|
|
||
| A major limitation of backends is that "a long time" probably isn't forever. | ||
|
|
||
| Sometimes we change the code of the backend. Or need restart the computer it's running on for an upgrade. Or its computer loses power and we need to start it again. |
There was a problem hiding this comment.
Suggested change
| Sometimes we change the code of the backend. Or need restart the computer it's running on for an upgrade. Or its computer loses power and we need to start it again. | |
| Sometimes we change the code of the backend. Or we need to restart the computer it's running on for an upgrade. Or its computer loses power and we need to start it again. |
Suggest bringing in something from cyf+ eg computers actually exist in the world.
|
|
||
| Because web frontends run in the user's web browser, they have easy access to lots of information about the user's computer. For instance, they know what language it's configured in, what time zone it's configured in, how big the browser window is, etc. | ||
|
|
||
| If our frontend code were instead running in a backend, the browser may need to include all of this information in every request it makes, just in case the backend needs to know it. This has a couple of drawbacks: It makes the requests bigger (which makes them slower, and maybe cost more), and it ends up sharing lots of data with the server that it may not need, which may compromise the user's privacy. |
There was a problem hiding this comment.
Another concrete analogy please. Tie it down to the world. What is this like, that they already know and understand?
|
|
||
| This means that a backend cannot try to open a connection to a user's web browser. The web browser needs to initiate the request, and then the backend can reply to the request. | ||
|
|
||
| Once a web browser opens a request to a backend, there are some ways to keep a bi-directional communication channel open. But the very first request needs to come from the web browser. |
There was a problem hiding this comment.
Suggested change
| Once a web browser opens a request to a backend, there are some ways to keep a bi-directional communication channel open. But the very first request needs to come from the web browser. | |
| Once a web browser opens a request to a backend, there are some ways to keep a two-way communication channel open. But the very first request needs to come from the web browser. |
| ] | ||
| +++ | ||
|
|
||
| Our example backend is **stateless**. If you make several requests to it, it will always do the same thing (even though doesn't always return exactly the same result!). |
| ```js | ||
| import express from "express"; | ||
|
|
||
| const app = express(); |
There was a problem hiding this comment.
Given that we haven't taught them express, do you think we should? I don't have. strong view on this just making sure you've thought about it.
|
|
||
| And they need to know how to talk to each other. In your frontend you probably hard-coded your `fetch` to fetch from `http://127.0.0.1:3000`. | ||
|
|
||
| First let's deploy our backend somewhere. Then when we know its address, we can update our frontend to talk to our deployed backend, and then deploy it too. |
There was a problem hiding this comment.
I think I want some pictures. Or some diagrams?
SallyMcGrath
requested changes
Jan 23, 2025
| }, | ||
| ]; | ||
|
|
||
| function randomQuote() { |
There was a problem hiding this comment.
BTW you can define runkits with express using runkit codefence
|
|
||
| {{<note type="Exercise">}} | ||
| We also need to store our frontend and backend somewhere to deploy them from: | ||
| 1. Make a new Git repository on GitHub. |
There was a problem hiding this comment.
Suggested change
| 1. Make a new Git repository on GitHub. | |
| 1. Make a new Git repository on your GitHub. |
|
|
||
| Do projects 36-40. You can do these on any Unix-based computer. | ||
| {{</note>}} | ||
|
|
There was a problem hiding this comment.
Suggest you reuse this marvellous diagram which took me ages
| feedback="No - that's the authority/hostname. | No - check the parts of a URL again. | Yes - anything at the start of a URL before the : is the scheme. | No - check the parts of a URL again." | ||
| correct="2" >}} | ||
|
|
||
| {{<multiple-choice |
There was a problem hiding this comment.
You might want a labelling task here so I made you this #1316
| {{<multiple-choice | ||
| question="A website hosting a book, so that you can read the book through a web browser." | ||
| answers="Just a frontend. | A frontend and a backend. | A frontend and a backend and a database." | ||
| feedback="Right - if we're just serving some static content, and it never changes, we only need a frontend. | Probably not - if we're just hosting the book, we probably don't need a backend. But there are many requirements which may necessitate one (e.g. password-protecting our book). | Probably not - if we're just hosting the book, we probably don't need a backend. But there are many requirements which may necessitate one (e.g. password-protecting our book, counting how many times it's been read, allowing comments, etc)." |
There was a problem hiding this comment.
I think here 1, please Hemingway these answers 🙏 - is the word necessitate ever really necessary? 😉
I think we will, nowadays, have to be more rigorous and clearer here. With so many Jamstack systems, JWT auth, serverless, they will have used many things like auth and comments without an apparent back end or db.
| ] | ||
| +++ | ||
|
|
||
| You've made static websites, both as part of the "world-wide web" reading, and in previous courses/modules. |
There was a problem hiding this comment.
Suggested change
| You've made static websites, both as part of the "world-wide web" reading, and in previous courses/modules. | |
| You have built static websites. These were HTML pages, which perhaps included some JavaScript. The JavaScript made them interactive. But in this definition they were still static. |
|
|
||
| You've made static websites, both as part of the "world-wide web" reading, and in previous courses/modules. | ||
|
|
||
| These were HTML pages, which perhaps included some JavaScript. The JavaScript made them interactive. But they were still static. |
There was a problem hiding this comment.
Suggested change
| These were HTML pages, which perhaps included some JavaScript. The JavaScript made them interactive. But they were still static. |
|
|
||
| From that point on, your web browser works on its own. Any event handlers, timers, etc are processed by the web browser. | ||
|
|
||
| And the job of the server was just to hand over files. Those files will probably be the same, no matter what user asked for them, or what computer they were using. |
There was a problem hiding this comment.
Suggested change
| And the job of the server was just to hand over files. Those files will probably be the same, no matter what user asked for them, or what computer they were using. | |
| The job of the server was just to hand over files. Those files are the same, no matter what user asked for them, or what computer they were using. |
|
|
||
| We often call these static files a **frontend**. | ||
|
|
||
| And we can build impressive, useful websites with just a frontend. We can include images, videos, and sounds. We can react to user input. We can change what we show on the page. We can even use things like [the Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) to store data so that if you leave the page and come back, your data is still there. |
There was a problem hiding this comment.
Suggested change
| And we can build impressive, useful websites with just a frontend. We can include images, videos, and sounds. We can react to user input. We can change what we show on the page. We can even use things like [the Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) to store data so that if you leave the page and come back, your data is still there. | |
| We can build impressive, useful websites with just a frontend. We can include images, videos, and sounds. We can react to user input. We can change what we show on the page. We can even use things like [the Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) to store data so that if you leave the page and come back, your data is still there. |
You can also say that the curriculum website is a static site. I would usually say that Smashing Magazine is, but I don't think you're using exactly the same definition here.
| {{<multiple-choice | ||
| question="If I'm using a website, and want to send a link to the page I'm viewing to a friend, does the website need a backend?" | ||
| answers="Yes - to be able to share the information between computers, it needs a backend. | No - a link will always work and show the same content. | It depends - on some websites links can work without a backend, but others need a backend." | ||
| feedback="Not always - if the website is just static, a link should work fine. | Sometimes! But only if the content it always the same for all users and a user can't change it. | Yes! Some websites are always the same for everyone, and links just work. Other websites, where users can change things (e.g. our to do list example), need some way of storing what things have changed, and this is normally a backend.<br /><br />Hint: If 'it depends' is a possible answer, it's _almost_ always the correct one!" |
There was a problem hiding this comment.
Would it be easier to have these as blocks instead of lines, like #1316 ?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this change?
Adds the first Decomposition sprint.
It's a slightly unusual sprint. It has a lot of prep content, and the only backlog is basically: "Follow the prep, and actually do all the things".
I'm a bit concerned at how much it's mixing "background reading" vs "active reading to do stuff", but also hoping this leads to the reading actually seeming relevant and clicking...
Common Content?
Adds a bunch of blocks
Removes/renames a handful of blocks no one has ever used and which never had any content.
Org Content?
Sets up some SDC sprints.