Тёмный
No video :(

Smarter Single Page Application with a REST API 

CodeOpinion
Подписаться 85 тыс.
Просмотров 16 тыс.
50% 1

How can you build a smarter Single Page Application or Mobile App with a REST API? The concepts have been since the beginning of the web, yet has somehow lost their way in modern REST API that drive a Single Page Application or Mobile App. Here's how to guide a Single Page Application based on state by moving more information from design time to runtime.
🔔 Subscribe: / @codeopinion
💥 Join this channel to get access to source code & demos!
/ @codeopinion
🔥 Don't have the JOIN button? Support me on Patreon!
/ codeopinion
📝 Blog: codeopinion.com
👋 Twitter: / codeopinion
✨ LinkedIn: / dcomartin
0:00 Intro
0:48 HTML & Browsers
2:30 Design Time vs. Runtime
3:56 Forms & Links
6:23 Hypermedia
HAL
stateless.co/ha...
JSON API
jsonapi.org/
Siren
github.com/kev...
Hydra
www.hydra-cg.c...
JSON-LD
json-ld.org/
#softwarearchitecture #restapi #singlepageapplication

Опубликовано:

 

15 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 42   
@rustamhajiyev
@rustamhajiyev 3 года назад
I enjoy every video you make. Thank you for awesome content, sir!
@CodeOpinion
@CodeOpinion 3 года назад
Glad you like them!
@drewjaqua2905
@drewjaqua2905 2 года назад
I really like that explanation and the distinction between Runtime and Design Time. Thanks for another great video!
@CodeOpinion
@CodeOpinion 2 года назад
Glad you liked it!
@MP737373
@MP737373 3 года назад
In a recent project we started with an approach like this initially but the problem is is this sort of thing has inherent complexity, and in our case we started off using some tooling that ended up not being flexible enough to do certain things and without auto generation or good tooling for these types of links doing this sort of thing manually I think would be a maintenance nightmare. We ended up just not using these sorts of links. I find with something like this you may end up having a lot of the same communications with client developers and the reduced communication overhead provided by the the smart links may not be worth the complexity of the implementation. Also from my experience with front end development I feel like it would be awkward to navigate these link trees and I would much prefer just having direct endpoints that I know upfront to get what I need. It's worth posing the question that if specs or practices were originally designed a certain way, yet for years people never used them "correctly" and over time people actively moved away from those patterns it was possibly (likely even) for good reason. I find truth is more in how people actually use things than how things are intended to be used. It's kind of like how a dictionary isn't the source of truth for meaning in language, language evolves and adapts over time and meaning is contextual based on the people using it. Specs will only be hard in contexts where they are enforced programmatically or simply don't work if not implemented strictly and outside of that they will be interpreted and evolve like language does. That said with GraphQL being popular in React and Node.js ecosystems, smart self documenting apis like this seem to popping up in popularity, but GraphQL last I checked was mostly tooling bottlenecked for non Node.js backends (and I feel like running into an issue where you can't easily do something you need to do with existing tooling and be forced to implement a complicated spec yourself or switch pattern mid way is a landmine that doesn't seem like it's worth inviting). So there is definitely merit in having a flexible spec to allow consumers to move rapidly without having to communicate (as much) for new endpoints, I just don't like the overhead and would doubt it is worth it in most cases. I do however love just simple autogenerated open api docs that most frameworks seem to have now, almost no work to add and instant value.
@CodeOpinion
@CodeOpinion 3 года назад
I appreciate the long comment and thoughtful comment! I had a long reply and accidently closed my browser. So here goes take #2. The server does not need to have inherently more complexity to conditionally add links to a response. Meaning, you already have business logic if an action or resource can be accessed. Using that same logic to include a link in a response can be relatively trivial. Also, it doesn't need to be 100% coverage of the business logic used in the action. As for the client, you're removing a ton of complexity and logic from the client as you're not duplicating logic, but rather just conditionally checking if something specific (link) exists in the response. As for the question you pose about moving away for likely good reasons: I've thought a lot about this. I don't have an answer but a couple opinions on why hypermedia never caught on in the HTTP API space. The first is because developers generally want tooling and an out of the box solution. The problem isn't difficult per se of conditionally producing and conditionally consuming links. But the solution is different depending on the framework/libraries/platform that you're using. The second is that there were no hypermedia focused media type based on JSON that got accepted as the standard when SPAs and mobile apps were taking off. Unstructured JSON won. That doesn't mean it's better. For anyone really unsure about hypermedia, I pose this question: Do you realize you consume it all the time with HTML? If you've created a server side rendered HTML web applications, you were conditionally returning hypermedia controls (links, forms, images, scripts, css) based on state. You guide the user/browser through an application based on hypermedia. A web application serving HTML is (can be) absolutely no different then serving JSON. It's just a representation.
@toastybowl
@toastybowl 3 года назад
Definitely used to adding e.g. "CanDo, IsType, CanAddObject, HasStatus" etc. type of fields to my responses in order to achieve this, but the links idea is very cool. Potentially much less code for me across projects, though I dwell deep within a forest of entity services. My cave-mates may like this idea as it sounds like it could simplify a lot. There is (hopefully) nothing invalid my services would allow them to do in handling a request so I find skepticism of the actions list unconvincing given that one is only fetching a single root as clarified already by other comments. This also sounds like it simplifies thinking about the client as a performer of tasks, as it is always bringing one's focus back to the current action set.
@CodeOpinion
@CodeOpinion 3 года назад
I like the "client is performer of tasks". It is exactly that. Thanks for the comment!
@orialmog
@orialmog 3 года назад
great content! thank you for making these
@CodeOpinion
@CodeOpinion 3 года назад
Glad you like them!
@fleedum
@fleedum 2 года назад
I'm addicted to your channel!
@CodeOpinion
@CodeOpinion 2 года назад
Glad you enjoy it!
@kenjohnsiosan9707
@kenjohnsiosan9707 Год назад
Runtime and Design Time :)
@codewkarim
@codewkarim 2 года назад
Thanks for this great explanation, On my project I use Clean architecture, and I was trying to implement HATEOAS, but I couldn't find a way to do it properly, Since it requires both the presentation layer (because it's related to how we present data) and the application layer (since we need to know what the user can and cannot do). Is there any clean way to do it. Thanks in advance!
@CodeOpinion
@CodeOpinion 2 года назад
I don't have a video that shows it but it's basically a translation/mapping from an application result to a web result.
@HiSaiWhy_KoolyKid
@HiSaiWhy_KoolyKid 3 года назад
What about versioning in this scenario..? what if some clients needs to use v2 of "unavailable"..? If we change the backend service to use v2 then wouldn't it impact others..? Or do we need to maintain client specific uri's ..?
@CodeOpinion
@CodeOpinion 3 года назад
You could return an additional action for the new version and then deprecate the original. (tools.ietf.org/html/draft-ietf-httpapi-deprecation-header-01). Or don't version and make the new unavailable backwards compatible.
@MichaelVeroukis
@MichaelVeroukis 3 года назад
On a REST api resources are requested and retrieved. This approach seems to append extra information that is not part of the resource: the actions. This is really a form of metadata but it's mushed into the resource representation. What if you request a collection of items and each item has a different set of actions?
@CodeOpinion
@CodeOpinion 3 года назад
That would be no different than if you were generating an html table with server side rendering and each row and columns for various links. If there are a lot of links/actions per item, which makes the payload increase, then provide a single link to get the others lazily when needed is also another approach.
@andrewackroyd6136
@andrewackroyd6136 2 года назад
Hi. Any thoughts on GraphQL (instead of REST) for api with SPA? Just looking at that as an option for VueJS and Net Core
@H0b0Gamers
@H0b0Gamers Год назад
This is great! What about in cases of user roles? Example admin can modify all properties of an entity, but a lesser role can only modify a few set properties. Would returning the allowed properties the user can modify be the best approach here?
@CodeOpinion
@CodeOpinion Год назад
Can't say I'm a fan of entity services for this reason/purpose. Rather I'd use a task based approach ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DjZepWrAKzM.html
@dobidob98
@dobidob98 2 года назад
spotify uses this technique too
@eric7758
@eric7758 2 года назад
Wow!
@paulstanley2789
@paulstanley2789 3 года назад
That is clever I like it it :)
@CodeOpinion
@CodeOpinion 3 года назад
I use hypermedia pretty extensively and it honestly feels weird not doing it. I'm kind of lost on how people that created server-side rendered HTML that transitioned to serving JSON don't find it natural to send actions/links just as they did with sending HTML that contained forms,images,achors.
@Yumo3000
@Yumo3000 3 года назад
Pretty cool explanation! That's exactly because I don't like using redux on Angular. Any ideas on good architecture of the server code to work following this pattern? I tried to code HATEOAS and it become into spaghetti code
@CodeOpinion
@CodeOpinion 3 года назад
Build around capabilities. For each capability, define the business rules for those in your domain. Then leverage that to determine if you should return the relevant URI for that capability in other resources.
@robertmrobo8954
@robertmrobo8954 3 года назад
Sounds very interesting, but I can already feel that it will be a little bit too complex to implement, with relatively little reward. I will look into this in detail during my spare time and see if the first impression I got is true. :) Thanks for your videos.
@CodeOpinion
@CodeOpinion 3 года назад
IMO, it's actually the reverse. It's less complex with more reward. If your inferring actions based on the state returned in a resource, then that logic must live in the client. If the server is determining it, which it already is in your domain, then leverage it. You're telling the client explicitly what it can/cannot do, rather than it inferring it (possibly incorrectly) from other data. If you want more info, I highly recommend this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QIv9YR1bMwY.html
@formula734
@formula734 3 года назад
@@CodeOpinion I can see how this approach allows the client side to be thinner and significantly reduce the effort in creating different types of other clients such as WPF or WinForms apps with very consistent behavior. But, what is the impact to your backend as the app evolves to provide a ton of new features over time? Do you have to create a new logical Presentation layer in your architecture to manage the increased complexity? --As always thank you for the great video!
@CodeOpinion
@CodeOpinion 3 года назад
It could. Often times instead of providing all the actions/links in a given resource, you provide a single link to another resource that then contains all the relevant links/actions.
@Zikakoo
@Zikakoo 3 года назад
Is there a reason you use POST for the sales endpoints? Wouldn't PATCH be a good choice here since you are doing a partial update? Good video!
@CodeOpinion
@CodeOpinion 3 года назад
If anything I would of said PUT and make it idempotent. I'm building by commands and queries as resources rather than entities and CRUD.
@feelingeverfine
@feelingeverfine 3 года назад
That's the whole point of the video. You aren't using REST you are using commands (POST) and queries (GET)
@zikkrype
@zikkrype 3 года назад
Hi. I'm subscribed for a while to your channel. I'm based in Ukraine, so I guess that's the reason that I don't have "JOIN" button. Is there any other option to become dev-level member?
@CodeOpinion
@CodeOpinion 3 года назад
I'm suspecting is country related. Looking at this support.google.com/youtube/answer/7636690 I don't see Ukraine. I'm going to try to find an alternative to allow membership through an alternative. Appreciate the support!
@ahmedabdo4371
@ahmedabdo4371 3 года назад
@@CodeOpinion Same here for me no "Join" button, I'm watching from Egypt
@CodeOpinion
@CodeOpinion 3 года назад
​@@ahmedabdo4371 I've setup a Patreon where I'll create posts that contain access to the Source Code. www.patreon.com/codeopinion
@CodeOpinion
@CodeOpinion 3 года назад
I've setup a Patreon where I'll create posts that contain access to the Source Code. www.patreon.com/codeopinion
Далее
Stop Calling Your API a "REST API"
17:42
Просмотров 16 тыс.
女孩妒忌小丑女? #小丑#shorts
00:34
Просмотров 7 млн
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Просмотров 1,4 млн
Is a REST API with CQRS Possible?
16:46
Просмотров 35 тыс.
Brutally honest advice for new .NET Web Developers
7:19
NGINX Tutorial - What is Nginx
14:32
Просмотров 87 тыс.
4 Tips To Succeed As A Self Taught Developer
11:08
Просмотров 32 тыс.
Debunking Kafka Top 5 Use Cases
10:02
Просмотров 15 тыс.
CRUD API + Complexity = Death by a 1000 Papercuts
12:40
You are using useFetch WRONG! (I hope you don't)
11:14