[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-settings":3,"blogpost-optimistic-frontend-development":72},{"footer":4,"contact_form":6,"chat_widget":11,"accolades":19,"seo_social":63},{"iso_notice":5},"Wolfpack Digital is an ISO 9001:2015, ISO 27001:2013 and ISO 14001:2015 certified company - © _YEAR_ Wolfpack Digital. All rights reserved.",{"budgets":7},[8,9,10],"Under $50.000","Between $50.000 - 200.000","Over $200.000",{"consent":12},{"greeting":13,"title":14,"body":15,"accept_label":16,"decline_label":17,"declined_message":18},"Awoo! I'm Wolfpack Digital's AI assistant. Ask me anything about our services, process, or team, and if you want a project estimate, I can point you to our AI Estimator.","Data Privacy","\u003Cp>Hi there! We would love to talk with you. Under the EU General Data Protection Regulation, we need your approval for our use of personal information (e.g. your name and email address) you may provide as we communicate:\u003C\u002Fp>\n\u003Col>\n  \u003Cli>We'll store your personal information so that we can pick up the conversation if we talk later.\u003C\u002Fli>\n  \u003Cli>We may send you emails to follow up on our discussion here.\u003C\u002Fli>\n  \u003Cli>We may send you emails about our upcoming services and promotions.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Is this okay with you?\u003C\u002Fp>","Yes, I Accept","No, Not Now","No problem. Come back if you change your mind.",{"winnersOfList":20,"awardsList":29,"inHouseAppImages":46,"certificationsList":50},[21,25],{"alt":22,"href":23,"image":24},"European Awards","https:\u002F\u002Fwww.theeuropeanawards.eu\u002Fpremiado\u002Fwolfpack-digital-awarded-in-the-app-development-category","\u002Fimages\u002Fabout-us\u002Fwinners\u002Feuropean.svg",{"alt":26,"href":27,"image":28},"Webby Awards","https:\u002F\u002Fwinners.webbyawards.com\u002F2024\u002Fwebsites-and-mobile-sites\u002Fresponsible-technology\u002Fresponsible-ai\u002F275408\u002Fequality-ai-fair-and-unbiased-algorithms-to-eliminate-discrimination-in-machine-learning-models","\u002Fimages\u002Fabout-us\u002Fwinners\u002Fwebby.svg",[30,34,38,42],{"alt":31,"href":32,"image":33},"Clutch 1000 List Reveals Top-Rated Business Service Providers of 2023","https:\u002F\u002Fclutch.co\u002Fpress-releases\u002Fclutch-1000-fall-2023","\u002Fimages\u002Fabout-us\u002Fawards\u002Fclutch.svg",{"alt":35,"href":36,"image":37},"Clutch Recognizes the 1000 Best B2B Service Providers in its Exclusive 2019 Clutch 1000 List","https:\u002F\u002Fclutch.co\u002Fpress-releases\u002Frecognizes-1000-best-b2b-service-providers-its-exclusive-2019-1000-list","\u002Fimages\u002Fabout-us\u002Fawards\u002Fglobal.svg",{"alt":39,"href":40,"image":41},"Mobile App Daily Award","","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmobile-app-daily.svg",{"alt":43,"href":44,"image":45},"Manifest Award","https:\u002F\u002Fthemanifest.com\u002Fro\u002Fweb-development\u002Fcompanies","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmanifest.svg",[47],{"alt":48,"href":40,"image":49},"Wolfpack Labs","\u002Fimages\u002Fhomepage\u002Fawards\u002Flabs.svg",[51,55,59],{"alt":52,"href":53,"image":54},"ISO 27001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LD367","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-27001.svg",{"alt":56,"href":57,"image":58},"ISO 9001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LBDB0","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-9001.svg",{"alt":60,"href":61,"image":62},"ISO 14001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fma\u002Fissued-certificates\u002F?certID=_7690LZSGS","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-14001.svg",{"default_og_image_urls":64,"default_og_image_alt":68,"og_site_name":68,"og_locale":69,"twitter_site":70,"page_type_defaults":71},[65],{"url":66,"style":67},"\u002Fimages\u002Fsocial_share_preview.jpg","og","Wolfpack Digital","en_US","@DigitalWolfpack",{},["Reactive",73],{"title":74,"body":75,"slug":76,"featured_image_urls":77,"meta_tags":102,"reading_time":110,"title_size":111,"tag_list":112,"formatted_published_at":116,"short_description":104,"categories":117,"alt_text":118,"published_at":119,"content_updated_at":118,"formatted_content_updated_at":118,"key_takeaways":120,"faqs":121,"updated_at":122,"canonical_override":118,"no_index":123,"canonical_url":124,"publishers":125},"Optimistic Frontend Development","\u003Cp bis_size='{\"x\":20,\"y\":20,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":1726}'>In the world of web and mobile apps, there is a lot of planning, designing, and decision-making even mid-development. When you already have a complex system in place, new features can really break the app’s UX; or your code; or the app’s performance.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":53,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":1759}'>Let’s consider this example:\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":87,\"w\":1818,\"h\":62,\"abs_x\":51,\"abs_y\":1793}'>We need to implement a “favorite” feature on our posts. After saving a post as “favorite”, three other actions need to be made - triggering an email, a push notification, and updating the recommendation algorithm.\u003Cbr bis_size='{\"x\":1233,\"y\":89,\"w\":0,\"h\":15,\"abs_x\":1264,\"abs_y\":1795}'>\r\nA “favorite” feature seems as easy to implement as it gets. But consider that the logic behind adding something to favorites can not only take a long time but also break after the user has already waited for the response. This is the point where we need to make a decision and it is as much a UX decision as it is an implementation one.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":162,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":1868}'>Many other scenarios can make you face the same decision. Things like having multiple microservices and the favorite action traversing quite a bit, or having an email trigger when someone favorites your post, etc.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":196,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":1902}'>To go a little bit deeper into this topic and have something visual to help you better understand the concept, I have also prepared a video here.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":230,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":1936}'> \u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":264,\"w\":1818,\"h\":323,\"abs_x\":51,\"abs_y\":1970}' style=\"text-align: center\">\u003Ciframe allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" frameborder=\"0\" height=\"315\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F9JSzZldsfGg\" title=\"YouTube video player\" width=\"560\">\u003C\u002Fiframe>\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":601,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":2307}'> \u003C\u002Fp>\r\n\r\n\u003Ch2 bis_size='{\"x\":20,\"y\":638,\"w\":1818,\"h\":23,\"abs_x\":51,\"abs_y\":2344}'>\u003Cspan bis_size='{\"x\":20,\"y\":642,\"w\":58,\"h\":18,\"abs_x\":51,\"abs_y\":2348}'>\u003Cspan bis_size='{\"x\":20,\"y\":642,\"w\":58,\"h\":18,\"abs_x\":51,\"abs_y\":2348}'>The app\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fh2>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":677,\"w\":1818,\"h\":41,\"abs_x\":51,\"abs_y\":2383}'>Our app is very simple, but also very important to our customers (currently just me): it is a feed of meme templates. I was lucky enough to find \u003Cstrong bis_size='{\"x\":837,\"y\":679,\"w\":77,\"h\":15,\"abs_x\":868,\"abs_y\":2385}'>\u003Ca bis_size='{\"x\":837,\"y\":679,\"w\":77,\"h\":15,\"abs_x\":868,\"abs_y\":2385}' href=\"https:\u002F\u002Fimgflip.com\u002Fapi\" target=\"_blank\">\u003Cspan bis_size='{\"x\":837,\"y\":679,\"w\":77,\"h\":15,\"abs_x\":868,\"abs_y\":2385}' style=\"color:#fa357b\">Imgflip’s API\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fstrong> and started coding a simple feed that fetches a number of meme templates, shows the title, image and also adds a favorite button for each post. At Wolfpack Digital, we mostly use Vue or Nuxt (\u003Cstrong bis_size='{\"x\":225,\"y\":700,\"w\":66,\"h\":15,\"abs_x\":256,\"abs_y\":2406}'>\u003Ca bis_size='{\"x\":225,\"y\":700,\"w\":66,\"h\":15,\"abs_x\":256,\"abs_y\":2406}' href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Fdifferences-between-static-websites-spa-and-ssr\" target=\"_blank\">\u003Cspan bis_size='{\"x\":225,\"y\":700,\"w\":66,\"h\":15,\"abs_x\":256,\"abs_y\":2406}' style=\"color:#fa357b\">here’s why\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fstrong>), so I went with the same stack.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":732,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":2438}'>The like\u002Ffavorite button was set up like a booby trap, as I always made the user wait for 3.5s, and after that, the action had a 50-50 chance to fail. This way, we were able to reproduce both successful and error behavior and see how our app would react in both these cases.\u003C\u002Fp>\r\n\r\n\u003Ch2 bis_size='{\"x\":20,\"y\":769,\"w\":1818,\"h\":23,\"abs_x\":51,\"abs_y\":2475}'>\u003Cspan bis_size='{\"x\":20,\"y\":773,\"w\":346,\"h\":18,\"abs_x\":51,\"abs_y\":2479}'>The natural first thought - that doesn’t really work\u003C\u002Fspan>\u003C\u002Fh2>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":808,\"w\":1818,\"h\":41,\"abs_x\":51,\"abs_y\":2514}'>My first thought when implementing actions that might take a while (I think working with mobile apps has definitely influenced this a lot) is to add a loader and only update the UI when the action is successfully completed. If the action is quick, that is great, but what if the action is taking a long time? I will need to start thinking about blocking the user from pressing the same button again while it’s loading, also only “loading” a specific component\u002Fitem, so the user’s UI does not get fully blocked from such a minor action.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":863,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":2569}'>Also, a significant issue would be error handling. The user hits the like button on a post, sees the loader, but decides to continue scrolling. After 2 seconds of only scrolling (or even worse, liking 10 other posts), an error message shows that the action failed. That would be confusing and frustrating.\u003C\u002Fp>\r\n\r\n\u003Ch2 bis_size='{\"x\":20,\"y\":900,\"w\":1818,\"h\":23,\"abs_x\":51,\"abs_y\":2606}'>\u003Cspan bis_size='{\"x\":20,\"y\":904,\"w\":498,\"h\":18,\"abs_x\":51,\"abs_y\":2610}'>Optimistic rendering - I got 99 problems but stopping the user ain’t one\u003C\u002Fspan>\u003C\u002Fh2>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":939,\"w\":1818,\"h\":392,\"abs_x\":51,\"abs_y\":2645}'>\u003Cspan bis_size='{\"x\":20,\"y\":1309,\"w\":800,\"h\":18,\"abs_x\":51,\"abs_y\":3015}'>\u003Cimg alt=\"\" bis_size='{\"x\":20,\"y\":939,\"w\":800,\"h\":384,\"abs_x\":51,\"abs_y\":2645}' src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F449\u002Fcontent_image1.png\" style=\"width: 800px; height: 384px\">\u003C\u002Fspan>\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":1345,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3051}'>Optimistic updates (a.k.a. Optimistic UI) is a pattern that we can especially see in frontend\u002FUX development where different actions update instantly on the visual interface without waiting for confirmation from the server.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":1379,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3085}'>Github is one of the many companies that do this - I have seen similar examples from Twitter, Facebook, Instagram. When I hit the star icon, the UI automatically updates and the API call starts. But the UI is already changed as confirmed long before the response comes back as successful.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":1413,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3119}'>So let’s update our code! And actually, everything is pretty simple: instead of handling the UI update inside the .then after the await method that does the API call\u002Faction, we just update it before even calling. The only thing left to do now is error handling & updating the UI back if the action failed.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":1446,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3152}'>The result makes a lot more sense from a UX standpoint.\u003C\u002Fp>\r\n\r\n\u003Ch2 bis_size='{\"x\":20,\"y\":1483,\"w\":1818,\"h\":23,\"abs_x\":51,\"abs_y\":3189}'>\u003Cspan bis_size='{\"x\":20,\"y\":1487,\"w\":100,\"h\":18,\"abs_x\":51,\"abs_y\":3193}'>Error handling\u003C\u002Fspan>\u003C\u002Fh2>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":1523,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3229}'>You have spent the last few minutes reading about how we manipulate the UI and pre-fill everything assuming it would magically work. But we still need to set up some code to know if something failed.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":1557,\"w\":1818,\"h\":41,\"abs_x\":51,\"abs_y\":3263}'>The video below covers what I would consider as bad UX, but might be the best example of this pattern’s weakness: visually representing a failed action. The user usually moves on, scrolls further, and showing an error will just make everyone wonder which action actually failed and why they are getting out of their flow for something that happened a few seconds ago.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":1611,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3317}'>This does not mean that we shouldn’t handle errors, but we need to choose our behavior very carefully:\u003C\u002Fp>\r\n\r\n\u003Cul bis_size='{\"x\":20,\"y\":1645,\"w\":1818,\"h\":103,\"abs_x\":51,\"abs_y\":3351}'>\r\n\t\u003Cli bis_size='{\"x\":60,\"y\":1645,\"w\":1738,\"h\":20,\"abs_x\":91,\"abs_y\":3351}'>we could just log the error and never show the user visual updates in case of failure\u003C\u002Fli>\r\n\t\u003Cli bis_size='{\"x\":60,\"y\":1666,\"w\":1738,\"h\":20,\"abs_x\":91,\"abs_y\":3372}'>another option would be a great error message (so we would know what action actually failed), but that is also very unobtrusive\u003C\u002Fli>\r\n\t\u003Cli bis_size='{\"x\":60,\"y\":1687,\"w\":1738,\"h\":20,\"abs_x\":91,\"abs_y\":3393}'>giving the option to retry, like adding a small button for the certain area that failed\u003C\u002Fli>\r\n\t\u003Cli bis_size='{\"x\":60,\"y\":1708,\"w\":1738,\"h\":20,\"abs_x\":91,\"abs_y\":3414}'>as soon as we find out that a call failed, update the UI back to the correct state; make sure no heart icon is left behind\u003C\u002Fli>\r\n\t\u003Cli bis_size='{\"x\":60,\"y\":1728,\"w\":1738,\"h\":20,\"abs_x\":91,\"abs_y\":3434}'>silent retries are also an option, but there should be a limit\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\r\n\u003Ch2 bis_size='{\"x\":20,\"y\":1765,\"w\":1818,\"h\":23,\"abs_x\":51,\"abs_y\":3471}'>\u003Cspan bis_size='{\"x\":20,\"y\":1769,\"w\":186,\"h\":18,\"abs_x\":51,\"abs_y\":3475}'>Important decision making\u003C\u002Fspan>\u003C\u002Fh2>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":1805,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3511}'>This pattern is not great in all situations. It replaces a bad user experience interaction - taking too long for interaction - with something that may be even worse, but happens a lot less. That’s why we need to choose wisely and be careful before going for it.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":1839,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3545}'>Of course, there are some good observations that we can take into consideration while going through the decision process:\u003C\u002Fp>\r\n\r\n\u003Cul bis_size='{\"x\":20,\"y\":1872,\"w\":1818,\"h\":103,\"abs_x\":51,\"abs_y\":3578}'>\r\n\t\u003Cli bis_size='{\"x\":60,\"y\":1872,\"w\":1738,\"h\":20,\"abs_x\":91,\"abs_y\":3578}'>avoid applying it for destructive\u002Fconstructive actions - interactions that delete, create or edit an entry, especially if at the end of a long flow\u003C\u002Fli>\r\n\t\u003Cli bis_size='{\"x\":60,\"y\":1893,\"w\":1738,\"h\":20,\"abs_x\":91,\"abs_y\":3599}'>this pattern works great with boolean actions - marking\u002Fremoving something as favorite or liking\u002Funliking\u003C\u002Fli>\r\n\t\u003Cli bis_size='{\"x\":60,\"y\":1914,\"w\":1738,\"h\":20,\"abs_x\":91,\"abs_y\":3620}'>it is very important to apply this to reliable actions\u002FAPI calls. For a small, binary action, but with a success rate of only 50%, this is definitely not a great option\u003C\u002Fli>\r\n\t\u003Cli bis_size='{\"x\":60,\"y\":1935,\"w\":1738,\"h\":20,\"abs_x\":91,\"abs_y\":3641}'>the same applies if the API is always slow and takes a very long time to complete; we are trying to be optimistic, but it is not a great idea to let the user just move on and start a lot of actions, all with a successful UI update, before the previously called actions are confirmed as completed\u003C\u002Fli>\r\n\t\u003Cli bis_size='{\"x\":60,\"y\":1956,\"w\":1738,\"h\":20,\"abs_x\":91,\"abs_y\":3662}'>sometimes a delay is expected (for example a change in permissions) and it is actually preferred to wait for confirmation before moving on\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\r\n\u003Ch2 bis_size='{\"x\":20,\"y\":1993,\"w\":1818,\"h\":23,\"abs_x\":51,\"abs_y\":3699}'>\u003Cspan bis_size='{\"x\":20,\"y\":1997,\"w\":79,\"h\":18,\"abs_x\":51,\"abs_y\":3703}'>Conclusion\u003C\u002Fspan>\u003C\u002Fh2>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":2032,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3738}'>This pattern needs a very high level of communication with the design team, as it affects the UX of the whole app. The basic concept assumes a highly reliable and (hopefully) binary action will complete, updating the UI accordingly before the actual confirmation arrives.\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":2066,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3772}'>Very similar optimistic patterns can be seen in multiplayer games or in concurrency (where multiple locks are managed with the calculated hope that they won’t interfere with each other).\u003C\u002Fp>\r\n\r\n\u003Cp bis_size='{\"x\":20,\"y\":2100,\"w\":1818,\"h\":20,\"abs_x\":51,\"abs_y\":3806}'>I hope this article will help you make better decisions in the future. Also, if you’d like to keep learning, I suggest you check out this \u003Cstrong bis_size='{\"x\":765,\"y\":2102,\"w\":352,\"h\":15,\"abs_x\":796,\"abs_y\":3808}'>\u003Ca bis_size='{\"x\":765,\"y\":2102,\"w\":352,\"h\":15,\"abs_x\":796,\"abs_y\":3808}' href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Funderstanding-business-logic-as-quality-assurance-qa\" target=\"_blank\">\u003Cspan bis_size='{\"x\":765,\"y\":2102,\"w\":352,\"h\":15,\"abs_x\":796,\"abs_y\":3808}' style=\"color:#fa357b\">guide to understanding business logic as a QA specialist\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fstrong>. You’ll find plenty of good tips on decision-making there as well!\u003C\u002Fp>\r\n","optimistic-frontend-development",[78,81,84,87,90,93,96,99],{"style":79,"url":80},"640","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F186\u002Ffeatured_image\u002F640\u002Fimage_processing20220616-4-ucd05i.webp",{"style":82,"url":83},"768","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F186\u002Ffeatured_image\u002F768\u002Fimage_processing20220616-4-ucd05i.webp",{"style":85,"url":86},"1024","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F186\u002Ffeatured_image\u002F1024\u002Fimage_processing20220616-4-ucd05i.webp",{"style":88,"url":89},"1366","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F186\u002Ffeatured_image\u002F1366\u002Fimage_processing20220616-4-ucd05i.webp",{"style":91,"url":92},"1600","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F186\u002Ffeatured_image\u002F1600\u002Fimage_processing20220616-4-ucd05i.webp",{"style":94,"url":95},"1920","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F186\u002Ffeatured_image\u002F1920\u002Fimage_processing20220616-4-ucd05i.webp",{"style":97,"url":98},"thumb","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F186\u002Ffeatured_image\u002Fthumb\u002Fimage_processing20220616-4-ucd05i.webp",{"style":100,"url":101},"original","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F186\u002Ffeatured_image\u002Foriginal\u002Fimage_processing20220616-4-ucd05i.webp",{"title":103,"description":104,"keywords":105,"contact_form:title":106,"contact_form:cta":107,"og:site_name":68,"og:type":108,"og:locale":69,"twitter:card":109,"twitter:site":70,"twitter:creator":70,"og:title":103,"twitter:title":103},"Optimistic frontend development","With web and mobile apps, there is a lot of planning and designing. When you have a complex system, new features can break the app’s UX, performance, or code.","frontend development, frontend, web development","contact us","send message","article","summary_large_image","6 min",32,[113,114,115],"web-development","frontend","fronted-development","Feb 15, 2022",[113],null,"2022-02-15T09:45:00.000Z",[],[],"2022-06-16T09:03:05.522Z",false,"https:\u002F\u002Fwd-fe-stage.herokuapp.com\u002Fblogposts\u002Foptimistic-frontend-development",[126],{"id":127,"author":128,"short_description":118,"role":129,"avatar_urls":130,"cover_urls":118,"linkedin_link":118,"instagram_link":118,"x_link":118,"meta_tags":138,"last_published_at":119,"same_as":140},14,"Victor","Head of Web Development",[131,133,136],{"style":97,"url":132},"https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fpublisher\u002F14\u002Favatar\u002Fthumb\u002FScreenshot_2021-06-10_at_17.webp",{"style":134,"url":135},"medium","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fpublisher\u002F14\u002Favatar\u002Fmedium\u002FScreenshot_2021-06-10_at_17.webp",{"style":100,"url":137},"https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fpublisher\u002F14\u002Favatar\u002Foriginal\u002FScreenshot_2021-06-10_at_17.webp",{"title":40,"description":40,"keywords":40,"contact_form:title":106,"contact_form:cta":107,"og:site_name":68,"og:type":139,"og:locale":69,"twitter:card":109,"twitter:site":70,"twitter:creator":70},"website",[]]