Posted on Sep 19 • Originally published at gomomento.com I’ve never been much of a front-end developer. Throughout my career my focus has been on the backend. I like designing systems, building data models, and choreographing event-driven workflows. It’s a satisfying set of problems that have challenged me since I graduated college. But when I started working at Momento early in 2023, things changed. I started building more user facing demos that required web pages that looked better than the unstyled divs I was used to working with. So naturally, as any developer would, I asked ChatGPT to teach me how to build apps in Next.js. I picked up a bit of React and got the hang of front-end development over the course of a few months. Then I realized something - front-end development is just as hard as the backend!‍The challenges are different, of course, and often lead to “slower than I would like” progress as I struggle through building something. But when Momento released the Web SDK, it was like someone gave me an easy button. And no, I’m not just saying that because it’s my job. It’s seriously way easier. Let me explain.‍Ok, that section header sounds like a lie. But it’s not! When you use the Momento Web SDK in your React, Angular, Vue, Astro, whatever UI framework you like, you get access to managed, serverless services without having to build them. You get access to a cache and managed WebSockets with nothing more than simple API calls. ‍This means you get direct access to database-like features that let you cache API calls, build user-session stores, and save files temporarily in a remote location when you use Momento cache. Many front-end frameworks allow you to do these things with session and local storage, but they’re tied to a browser. With Momento, the constraints are cut loose. You get all these abilities cross-browser sessions and even cross-machine.‍Momento acts as a personal high-speed web server for you to store temporary data and manage your WebSocket connections.‍Charged only for data transfer into and out of Momento with a 5GB monthly free tier, this is a no-brainer for any front-end developer. ‍Instead of checking and validating local storage TTLs for your user data, just save it into Momento cache and handle defaults when you get a cache miss.You can store an entire JSON object in a dictionary and fetch as much of or as little of the information as you want, like a GraphQL API (almost). This can be insanely powerful as you load information about a user. You can continue to add fields to this dictionary cache item and fetch details out of it from any machine, allowing other users in your system to gain access to the data in milliseconds.‍If you’ve ever visited Momento’s booth at a conference, the games we run use a similar pattern. In fact, it uses the cache as the only data store, there’s no database at all. Check out the source code.‍Have you ever needed to securely share a file with someone but didn’t know how to build a web server, setup https, and configure a storage mechanism? Me too (assuming you said yes). Well good news, even that has become only a few lines of code.With the image set in the cache, you can create a token scoped explicitly to that one cache key, granting temporary access to it for wherever holds the token.In this example. the file is only available for 10 minutes so you don’t have to worry about your secure data being stale or left unknowingly on a server somewhere. With automatic time to live (TTL), your files are removed with no additional work.‍For a full example file sharing app, you can check out our reference application.‍You can build an entire chat app using only a front-end framework and Momento! Store the users and messages in cache items and notify people when a message is sent by publishing to Momento Topics. No lengthy auth mechanisms, connection management, or databases necessary. If you want to create short-lived, session-based chats, this is the perfect solution.‍When messages are sent to a chat room, you can store them in a list cache item. This type of cache item will store things chronologically, allowing you to keep a thread-safe history of all messages in the order they were sent.When people enter or leave a room, add them to a set cache item. This item type saves an unordered array of distinct items. This means if one user is having issues with network connectivity and keeps leaving and rejoining, it’s ok - the set will deduplicate them so you don’t have to.After somebody has typed in their chat message and hits the “Enter” button, you can publish a message to everyone in the chat room in a single call, notifying them instantly of the new message.Chat rooms come in many flavors. Check out our blog post on a full build we did in Vercel with accompanying source code.‍Nothing is more whimsical than loading up a webpage and seeing a mouse zoom across the screen that doesn’t belong to you. Collaborative platforms are all the rage and they can’t be done without the support of WebSockets. But WebSockets are hard to build and they require a server-side component. Not with Momento. ‍Using Momento Topics, you can connect front-end to front-end, backend to front-end, and even backend to backend. There’s no restrictions on what can produce and consume events. This means you can send reactions, build collaboration sessions, and gamify your apps without server-side components!‍Simply publish to a topic to send a message and subscribe to register an event handler when an event rolls in. We’ve already seen how easy it is to publish a message in the chat example. Subscribing is as easy as setting up an event handler when a message is received and when an error occurs:The event handler is completely up to you, meaning you can do anything you like in response to a message! For a practical example, you can check out my live reaction app where this code was pulled from.‍There are tons of cool things that you can do in the front-end. Why spend time re-inventing the wheel and building your own caching mechanism or yet another WebSocket implementation? Instead, use a service that does it all for you and gives you access to an autoscaling, ultra-low latency web server directly from your browser (that’s secure, to boot)!‍I’ve found this to not only be a significant time saver but also a huge total cost of ownership reduction as well. There’s no back-and-forth with the backend teams waiting for an API to be built. There’s no waiting for infrastructure to be stood up to try out something new. There’s no scheduled downtime. Our teams maintain significantly fewer moving parts. It’s serverless services in the front-end.‍Quick mention on security. Remember, don’t pass long-lived API keys to the browser. Opt instead for tokens - short-lived, limited-scope values perfect for the browser.‍Getting started with Momento is free! Sign in with your Gmail or GitHub account and get going in seconds! We’d love to see what you build! Hop on over to our Discord and say hello, the team is there ready to answer any questions and admire your projects.Happy coding! Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Nevo David - Sep 7 Anden Acitelli - Aug 20 Hazar nenni - Sep 3 Mysterio - Sep 11 Ready to get started with Momento Cache or Momento Topics? Once suspended, momentohq will not be able to comment or publish posts until their suspension is removed. Once unsuspended, momentohq will be able to comment and publish posts again. Once unpublished, all posts by momentohq will become hidden and only accessible to themselves. If momentohq is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Allen Helton. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag momentohq: momentohq consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging momentohq will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.