Javascript

10 Mobile AR Apps That Are Creating the “New Normal” for Your Customers

Published Jan 7, 2020

Updated Feb 14, 2023

7 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

As developers and businesses leaders, we know that augmented reality is no longer a far-flung futuristic concept. In fact, a 2019 Perkins Coie survey revealed that roughly 90% of tech leaders and consultants believe that the use of immersive technologies will be as ubiquitous as mobile devices by 2025. But more intriguing than this, is the diversity in opinions from respondents when asked which sectors they believed would most invest in AR/VR technologies. Not surprisingly, 54% include gaming in their top picks. But that narrow majority is rivaled by 43% of respondents who include healthcare, and at least 20% who felt strongly about a number of other industries, including education, military and defense, and manufacturing/automotive.

Though the use of AR technologies is expected to explode across the consumer user-base, only 22% of consumers, in a 2019 ARtillery Intelligence survey, were aware of having used mobile AR technologies themselves. Now it may just be one dev’s opinion, but I believe that this number does not accurately reflect the true percentage of those surveyed who have actually used AR- just the percentage that KNOW they’ve used AR.

But is this number important?

I think so.

I imagine that the unknown percentage that claimed not to have used mobile AR apps, but who have unknowingly used them, likely just stumbled upon them, not drawn to the fact that the applications utilize this transformative technology, and being completely oblivious that they used AR. This unknown should terrify, or motivate executives, because this may mean that AR is so quickly and seamlessly integrating with other mobile technologies, that the change is completely inarticulable at best, and unnoticed at worst, by the average consumer.

In other words, AR may be quickly becoming the new normal, with unintegrated technologies possibly being seen by consumers not as a different class of technologies, but, perhaps, as an “inferior” technology.

So let’s check out 10 mobile apps that are already preparing your future customers and users for the “new normal”:

Wecasper

Launched in 2015, Wecasper is a mobile social media application that allows its users to store multimedia content in geolocated containers, almost like time capsules, aptly called “caps”. But not only does this app allow users to interact with certain content while in particular locations, it also lets users search for, and see the caps in their environments through their mobile screens!

WallaMe

Not so unlike Wecasper, WallaMe have given users the ability to hide messages in the real world, and share those messages with their friends, and the general public. Users can draw pictures, or paint messages on physical walls around them- almost like virtual graffiti- and then alert their friends about the message’s location! Friends are then able to see the messages they leave for each other, and even share those messages with other users!!

Pottery Barn’s 3D Room View App

Ever been on the verge of buying that stylish chair, or perfect coffee table, but just don’t know how it would look in your living room? Pottery Barn is one of a number of furniture retailers, including my favorite, Ikea, that have launched AR powered retail platforms. With their 3D Room View App, users are now able to place spatially accurate renderings of Pottery Barn’s catalog of furniture to see how the pieces fit their rooms. Customers never need to doubt their online purchases, and Pottery Barn will undoubtedly see an increase in engagement with their ecommerce platforms.

Sherwin William’s ColorSnap Visualizer

It seems Pottery Barn isn’t the only home decor and improvement company that has caught the AR bug. Industrial paint company, Sherwin Williams is giving their customers the ability to try out colors without having to pick up swatches, or dab unsightly (and let’s be honest, unhelpful) brush strokes on to their walls. Instead, customers can actually project colors onto their very own walls through a mobile interface, giving them the ability to try out hundreds of different colors in just minutes.

Star Walk 2

Developed by Vito Technologies, Star Walk 2 is a fun educational application that guides users through the night’s sky. All a user has to do is point their phone toward the sky, and the app’s AR feature will not only tell the user what stars, constellations, and other astronomical features are above, but will show them as well! No more guessing at what constellations are what, or if that little light above is a star or an airplane- users can trust Sky Walk 2’s AR feature to tell them everything they want to know, and probably a little more! Sappy high school dates will never be the same!

MeasureKit

Now I know that I’m not the only one who is CONSTANTLY misplacing the one measuring tape we keep around the house. That’s where MeasureKit swoops in for the rescue. MeasureKit uses advanced AR technologies to allow its users to quickly and accurately measure lengths, distances, trajectories, and angles with nothing more than the camera on their mobile devices. I would download this is a second if it didn’t make me so afraid of misplacing my Smart Phone too!

The Safety Compass

Now let’s take a quick diversion from consumer apps, and look at a mobile app being used to help keep industrial work sites safer for employees. According to the app’s publisher, an employee dies on a worksite every 15 seconds, globally. The Safety Compass is hoping to decrease that number significantly with its mobile app that gives workers the ability to scan their worksites for potential hazards, and shows them relevant information on standard safety protocols with which to approach the hazards. This takes the guess-work out of not only whether something is hazardous, but what that hazard is called, equipping workers with relevant information that will help keep them safe.

Janus Health AR

Janus Health is changing the future of dentistry and orthodontics with its mobile compatible AR application. The app scans a patient’s teeth, and shows them, in real-time, what their teeth could look like after a procedure. This not only boosts patient confidence, but may also expediate the consultation process for providers, and increase patient engagement with the practice. I wonder if the app can make your teeth look worse too? Maybe if my orthodontist had this app when I was a teenager, I would have actually worn my retainer!

Google Lens

Google Lens, for Android (sorry iOS users), brings the power of advanced image recognition software to the palm of its user’s hand. Have you ever taken a walk through the park, and wanted to identify what kind of tree or flower is in front of you? Now all you need to do is point your mobile camera toward it, and Google Lens will identify it for you! But that’s not all it does! Google advertises that users can also translate text from signs or packages, scan restaurant menus to find pictures and reviews of the items, and even find out more information about landmarks just by pointing their mobile cameras!

Quiver

Quiver is an AR enhanced edutainment mobile app that helps bring kids’ drawings to life! Users simply need to print off the pages offered through the company’s web platform or app, color in the photos, and use a mobile device to see lifelike 3-D renderings of the pictures right in front of them! Quiver has also expanded, releasing new product lines, including a version of their app that provides all of the fun of coloring, and AR, with a greater focus on education!

SO WHAT'S THE TAKE AWAY?

According to Perkins Coie, the North American market is expected to see the most significant growth in AR investment over the next 5 years. While the language of AR is not necessarily on the forefronts of consumers’ minds, the pressure to provide these more natural connections between the digital world and consumers will increase as more users come to expect AR integrated application functionalities.

Now is a perfect time to invest in AR technology! Whether you are looking to engage more with your customers, improve the lives of your employees, or simply create a product that will enrich users' lives through play and learning, there is space for AR integrated mobile applications within your company. By starting your transformation now, you are affording your company the opportunity to identify the areas of your business that can best be enhanced by this and other transformative technologies, and make mindful, well considered steps to developing these technologies for yourself.

Do not wait until the pressure from your competitors eventually forces you to hurry a product to market. Begin the process now, and you will thank yourself later.

Don’t know how to start?

Contact This Dot Labs to speak with leaders in enterprise-level digital transformation. This Dot Labs is a web development firm that helps some of the world’s leading enterprises, including American Express, ING, Groupon, and many others, reach their development goals through consulting, mentorship, and training. With our diverse team of seasoned senior developers and mentors, we can help you harness the power of advanced modern tools to keep you ahead of the AR curve!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

This Dot

Detect Hand Sign Languages with Tensorflow

Interested in learning how to use Tensorflow to detect hand sign languages in your apps? By the end of this read, you will know how to implement Tensorflow in your application with very simple steps. In our example today, we will be using Vue. What is Tensorflow? Tensorflow is an end-to-end platform _(meaning: delivering complex systems or services in functional form after developing it from beginning to end.)_ used for building Machine Learning applications, and it is also open-source. TensorFlow enables you to build dataflow graphs and structures to define how data moves through a graph by taking inputs as a multi-dimensional array called Tensor. You can read more on Tensorflow here. What is a Model? A model is a function with learnable parameters that maps an input to an output. A well-trained model will provide an accurate mapping from the input to the desired output. Tensorflow Models Tensorflow models are pre-trained models, and there are four defined categories of them: - Vision: Analyze features in images and videos. - Body: Detect key points and poses on the face, hands, and body with models from MediPipe - Text: Enable NLP in your web app using the power of BERT and other Transformer encoder architectures. - Audio: Classify audio to detect sounds. If you want to go into more detail, check out Tensorflow Models. All these models are broken down into subs and for our case, we will be making use of the Body Model which has the hand pose detection we need in order to detect the hand signs. Hand Pose Detection This model used a 2D and 3D multi-dimensional array which enables it to predict the keypoints of the hands. Example of a 2D is [[1,2],[3,5],[7,8],[20,44]] and that of a 3D is [[1,2,5],[3,5,8],[7,8,6],[20,44,100]]. This hand pose detection is a model from the MediPipe as we established above, and it provides us with two model types which are lite and full. The accuracy of the prediction increases from lite to full while the inference speed reduces, i.e. the response time will be slower as the accuracy increases. What do we need? There are a few dependencies we need to get things working, and I also will be assuming that you have your project set up as well. You will need to add these dependencies to the project ` Above, in the commands, you will notice we added a fingerpose. Let's talk a little about what we need the figerpose for. Fingerpose Fingerpose is a gesture classifier for hand landmarks detected by Mediapipe hand pose detection. It also allows you to add your own hand gesture, which means that a gesture that signifies the letter Z can signify Hello based on your fingerpose data. We will see an example of how the data looks in a bit. You can check out fingerpose for more details. Get started We are going to use Vue for this illustration. We will start by looking at the HTML first, and then we will cover the JavaScript. Our Template will be a basic HTML that will have a video tag so we can show a video after getting access to our webcam. Template ` The snippet above shows a div and a video tab. The video is used when we gain access to the webcam. We will now be writing the JS required to initialize the webcam. Script ` We imported two methods from vue: onMounted and ref. The onMounted runs when the page is fully mounted while the ref is used to declare a reactive value to reference the video element. If you look at the video tag in the template, you will notice a ref property. You can check out Template ref and onMounted lifecycle hook. In the openCam function, we first try to test if mediaDevices is available on your browser navigation. >The MediaDevices interface provides access to connected media input devices like cameras and microphones, as well as screen sharing. In essence, it lets you obtain access to any hardware source of media data. This MediaDevice has a method getUserMedia which prompts the user for permission to use a media input. You can find all you need to know about getUserMedia here. From the snippet, we can see that getUserMedia returns a promise, and with that, we can get the media stream as a response using then(). We check if the video element has srcObject or not. If it does we assign the media stream to the srcObject and if not, we convert the media stream to a URL and assign it to the src of the video element. With this Snippet and with a few style, you should have your video showing your awesome face! Introducing Tensorflow and Hand Detection Now that we got our webcam working, we will update the Template and the script in order to detect, predict, and display the alphabet based on the hand sign prediction. The updated HTML should now look like this: ` The div with class name alphabet will display the alphabet based on the hand sign prediction. We will be introducing two(2) new functions, createDetectionInstance and handleSignDetection. Firstly, lets begin with the createDetectionInstance which is an integral part of the hand sign detection and then we will introduce handleSignDetection which predicts and displays the hand sign. ` To be able to detect hand poses, we need to create an instance of the handpose detector, and here, we created a function createDetectionInstance which is an asynchronous function. You can check out this Tensorflow blog to see more details. Now that we have created an avenue to detect hand signs, let us start detecting the hand. In that light, we will be adding a handleSignDetection function. ` The handleSignDetection runs after creating the detection instance. We have a setInterval that runs every 2 seconds (PS: _the 2 seconds timing is arbitrary and can be less or more_) to check if there is any hand sign. We also have a conditional statement to ensure the video element exists, and the detection instance was created accordingly. So, the detector calls a method estimateHands, which tries to predict the hand pose by getting keypoints with values that are either in 2D or 3D (Multi-dimensional Array). If you check your console log, you will see an array of data if any hand pose is detected. Now that we can detect hand poses, we will now add fingerpose that will help predict and display the alphabet based on the hand sign. ` Assuming that our detector sensed a hand, it is time to match this value based on the hand signs we created with the fingerpose. The landmark variable is a 3D array pulled from the hand result's keypoint3D key value. There is also a keypoint as well, which is a 2D value, and both will give the same result. Now, using GE.estimate, we can generate a possible gesture that matches the sign, and a score/confidence is assigned to each gesture pending the amount of gesture predicted. So, the gesture with the highest score/confidence is selected since it is estimated to be the closest to the hand sign from the figerpose hand signs we created. We also imported Handsigns and its content looks like this: You can also get the handsigns folder from the 100-ms-vue repository. Looking at the screenshot, there is a GestureDescription instance that takes a string A which will represent what the hand sign will stand for. So, it could be anything you want the handsign to stand for. >onMounted is asynchronous because we need to ensure that our detection instance is created, which is required to detect the hand sign. With the updated code, you should be able to display some letters. Conclusion Don't forget, you can see in detail how this was implemented in one of This Dot Labs' open source projects 100-ms-vue. Please note that what we did is just a basic implementation, and to have a production-ready version, it will need a bigger model, and a more complex detection to be able to identify hand sign language....

Jul 12, 2023

7 mins

Artificial IntelligenceTensorflowMachine Learning

Let Purpose Drive Your Artificial Intelligence Transformation

From administrative and analytics tasks present in nearly every industry, to niche processes that serve only a handful of businesses, the diversity of how we apply Artificial Intelligence grows, seemingly by the moment. And with it, the size of the market is exploding. In fact, less than half a decade ago, this market was valued at $644 million, and half a decade from now, it is expected to be worth nearly $118 billion. When discussing the growth of AI, many have a hard time separating it from the advancement of AI. While the latter will naturally follow the former, the vast majority of companies that are integrating, and expanding the size of this market, will be in a constant state of catching up to some of the world’s foremost leaders in AI advancement. And I’m here to tell you, that’s okay. Because, as the growth of the AI market continues, the diversity in humans that will use it, and human demand that will be met by it, will grow too. And your responsibility as an executive or leader is not necessarily to push the envelope of AI, or discover the next game changing function at which the world can marvel; it is to meet the needs of the humans, be they your employees or customers, who will benefit from your integration. Of course, this is a very exciting time in the history of advanced digital technologies. Despite how far we have come, when we consider the potentially unending future of this transformative technology, we realize that AI is still in its infancy. As such, we often approach from a performance advancement mindset. However, if you confine your definition of performance to objective technical metrics, you may find yourself perpetually pursuing faster load times, smaller bundle sizes, and more impressive features. This may work out for your team if you have an unending line of investors, or get incredibly lucky. But even some of the biggest companies that neglected to first think of their user experience above all else have found themselves victims of Icarian pitfalls that have shelved their projects, depleted their financial resources, and denied users of products that they need. I do want to note, however, that the focus of this article isn’t to suggest that we shouldn’t strive to advance our understanding of the “nuts and bolts” of AI and other transformative digital technologies. But it’s time to make tough decisions about your company’s place in the AI marketplace. Do you have the budget, the demand, or a responsibility that requires you to implement the most cutting edge technologies available to the market? The answer for most companies is, no. For many, their future with AI is a continual, and incremental process of meeting the minimal needs of their customers, employees, or processes. And I am here to say that not only is this okay, but it’s a good thing. In this article, I implore you to look at AI as a tool for promoting human excellence and experience, and rethink what it means for AI technology to be “performant”. Ultimately, I want you to feel inspired and empowered to begin your digital transformation voyage by placing people and purpose at the helm. RETHINKING PERFORMANCE According to leading educational non-profit Autism Speaks, 1 in every 59 children born today will fall somewhere on the autism spectrum. Although symptoms are diverse, many individuals with this diagnosis struggle with normative social conventions in a manner that impacts their daily lives. Due to advancements in our understanding of autism, it’s now typically diagnosed in early childhood, tasking many parents with the responsibility of helping their children navigate a world that better accommodates neurotypical behaviors. Laura Krieger is one of these parents. Matthew, her eight year old son, has autism, and struggles to read others’ emotions. The pair were featured in a PBS Newshour segment on Brain Power, a company founded by award winning neuroscientist and entrepreneur, Ned Sahin. Brain Power’s product is a Google Glass aided software that utilizes both AI and augmented reality technologies to help kids with learning differences build skills such as identifying emotions, and maintaining eye contact, through play. When Krieger plays one of these skill building games with her son, she can’t help but break out in tears, saying she feels like he can truly see her for the first time. Krieger is not responding to just how low the latency of the codebase powering the software is, or whether its deploying the latest architectural concepts. She likely doesn’t care whether the software was created using Amazon Web Services, TensorFlow, or a proprietary system. What she does care about is getting the chance to connect with her son in a way she never thought possible. And when we look at Brain Power through the eyes of children who use it, we see its strength in its mode of education. Rather than running users through drills or lesson plans, it rewards them through collaboration, natural interaction, and a gamified points system. When you see the children using the system, they aren’t marveling at the natural feel of the interface that betrays its complexity. They’re simply having fun. This is the type of performance for which we should strive. THE CASE OF WATSON FOR ONCOLOGY In 2013, IBM launched a partner project with The University of Texas MD Anderson Cancer Center to create a “Watson for Oncology” software that would help doctors identify and prescribe courses of action for cancer treatment. After pumping $62 million dollars into the project, MD Anderson officially shelved it in 2017, halting their pursuit of a cure for cancer. But the problem wasn’t a technical one. That’s to say, it was not found within the codebase. It was with the data being processed by it. The reason that MD Anderson pulled the plug on the project, which would eventually be revealed by StatNews after reviewing internal slide decks from MD Anderson, was that the program was prescribing “unsafe and incorrect” treatment plans to real patients after the product had been sold to hospitals around the world. Anderson sourced the problem back to IBM engineers and New York City-based Memorial Sloan Kettering Cancer Center, who were responsible for training Watson for Oncology. It was later discovered that their ML training process relied on a relatively small collection of hypothetical oncological cases rather than using actual patient data. Of course, we cannot presuppose intent. I am of the opinion that IBM and Kettering truly wanted to provide a product that would revolutionize oncology treatment, and save lives. But it is hard to imagine a reason why a company creating a product meant to help doctors treat their patients in the field, would not have trained their AI software with data produced by doctors working with actual cancer patients. So after indefinitely stopping this project, MD Anderson had exchanged $62 million, and four years of its time, to create a product that may have reflected some of the most advanced technical concepts available at that time, but is completely useless, in its current form, for the purpose it was meant to serve. Imagine where we could be, how many lives could have been saved or prolonged, and how much money would have been saved, in the nearly three years since this product was pulled, if developers had placed equal focus on their users and the purpose of their product as they did the technical elements. MEETING NEEDS *“As researchers, we make decisions about what our AI systems can do. It may not necessarily be optimal. It may not be necessarily efficient if you look at all of the metrics… but it may be optimal with respect to the human… which means that the system works.”* - Ayanna Howard, Ph.D Chair, School of Interactive Computing Georgia Institute of Technology Kaden Bowen of Lincoln, Nebraska shares his father’s passion for cars. Though he is non-verbal due to cerebral palsy, he asks his father, James, to “go for a ride”, multiple times a day with the help of a digital talkboard. James dreamed of taking his son on a roadtrip in a vehicle that was more stylish and fun than their wheelchair-accessible van. He searched high and low for a sporty car that he could modify to at least allow him to store a foldable wheelchair, until he realized that the hatchback of a standard Corvette might just be big enough for one. Two weeks later, the duo took a 728 mile round trip to the Corvette museum in Bowling Green, Kentucky in their brand-new (to them) Corvette, which came standard with a trunk big enough for Kaden’s chair. The Bowens don’t seem to over-complicate the accommodations that they have put in place for their son. To help increase his level of independence, they outfitted their home with Amazon Echo devices that are sensitive enough to understand the commands that are programmed into Kaden’s talkboard. Using a combination of the two technologies, Kaden can do a lot on his own. He can call his parents on the phone, stream videos on Netflix, and operate lights. It seems so obvious, but it really is quite inventive. Sure, one day we will have widely accessible neural link technology that will allow Kaden to circumvent the talkboard, and do so much more than what is permitted by an Echo. But just like his dad’s Corvette, that comes standard with enough storage space, sometimes, the best fixes are the best fixes because they are available, and they work. The technologies that Kaden uses may not boast the best metrics, feature the most jaw dropping functions, or offer the most direct route to helping him achieve increased independence. I’m sure that the communication between the talkboard and the Echo device is not always perfect. But the combination of these two relatively affordable, and accessible technologies have given Kaden more autonomy with reliable, usable services, and that, in and of itself, *is* high performance. AI INITIATIVES ARE FAILING These past few years have proven to be extremely exciting for AI technologies, and businesses are responsive, with a 2019 Gartner report showing that 37% of the nation’s leading enterprises are or are shortly planning to integrate some form of AI into their products or processes. This percentage reflects a 270% growth in that statistic when compared to research conducted in 2015. And this proportion bumps up to 62% when we look at Supply Chain and Logistics, and reaches nearly 80% when discussing the Healthcare industry. But these awe-inspiring stats come with troubling predictions that, through 2020, roughly 80% of enterprise AI programs will remain in a limbotic state of development due to their inability to properly scale with their organizations. In essence, we may be creating fabulous algorithms, with wildly impressive features and functions that may become little more than multi-million dollar proof-of-concepts. And this might be okay for some businesses who have the resources to pursue multiple avenues and digital transformation. But I am of the belief that most companies that have yet to enter AI space by now will depend on a significant ROI from the programs that they start over the next few years. For these companies, it is imperative not only to balance resources, and create realistic time-frames for integrating and/or shipping their products, but to stay diligent against the propensity for AI programs to become isolated within an organization. With all of the buzz around AI, and the seemingly endless supply of jaw dropping products and services coming out of the world’s foremost information technology companies, it’s natural that smaller programs want to keep up with the Joneses. It is, therefore, the responsibility of executives, and others in business development roles, to remain involved with their AI development programs to ensure that products and services do not outpace the demands and capacities of their customers or businesses. WORKING SYSTEMS *“The current wave of Artificial Intelligence is going to hit a peak inside of the enterprise. But when it does, it’s not going to be a monumental revolution of technology, but rather a monumental revolution of people.”* - Traci Gusher Partner, US Leader- Artificial Intelligence Analytics and Engineering, KPMG There is a lot of chatter about the need for enterprises to integrate AI powered technologies into their workflows, and products. Anxiety about the need to introduce this transformative technology is warranted. Products like Alexa, Siri, and Echo Dot are changing consumer expectations, while Forrestor predicts that, in 2020, 25% of Fortune 500 companies will include AI building blocks in their automated processes. From product to process, AI is infiltrating nearly every sect of business. That being said, it is a mistake for companies to rush an AI program without first internalizing and developing concepts of how the resulting products will better the lives or capacities of those who will use it. I get it. It’s so tempting to want to patent the next game changing system or algorithm, but if your customers, users, or employees, could be equally, if not better served by a simpler system, or another company’s proprietary tools, what is the point? Is it 100% necessary that your business be on the cutting edge of Artificial Intelligence? Will it truly better your products, services, workflows, or customers? AI has such an amazing capacity to enrich the human experience, be that personal, or professional. We overemphasize minute technical details without giving that same attention to the aspects of user needs, and experience at our own peril. Don’t feel the need to push the boundaries of our understanding of transformative technologies simply to implement your own products and services. All you need is something that sees your user, empowers them, strengthens their skills, and most importantly, works. Ready to begin your digital transformation journey, but don’t know how to start? Don’t hesitate to reach out to the team at This Dot Labs by emailing hi@thisdot.co....

Feb 21, 2020

10 mins

Announcing October JavaScript Marathon - Free, online training!

Join us October 28th, 2020 for our next JavaScript Marathon! JavaScript Marathon is a full day of free, online courses on React, TypeScript, GraphQL, and more. Come learn about some of the leading web development technologies, and concepts! Stay for one training, or stick around for the whole day! No two sessions will be the same! --- React Hooks 201 *Featuring Kyle Hill @ 11:00am - 12:00pm EDT* It might have taken a little while, but: have you mastered the use of useState, and maybe even (mostly) understand what useEffect is doing at this point? Cool. Let’s level up our React Hooks skills further by diving into some of the other tools in our box. We’ll leverage useContext and useReducer to create an easy to implement interaction and data flow that scales along with your application and your team. --- Getting Started with Eleventy *Featuring Kyle Mitofsky @ 12:30pm - 1:30pm EDT* Eleventy is a JavaScript based Static Site Generator (SSG) that's designed around performance, accessibility, and simplicity. Take your first steps to build out front end designs, websites, and content with this walk through that'll get you set up on your first eleventy site. Learn some of the basics with some patterns and best practices as well. --- TypeScript for Beginners *Featuring Dacey Nolan @ 2:00pm - 3:00pm EDT* During this introduction to TypeScript, we will cover what TypeScript is, what benefits it provides, and how you can use it in your projects. Code with me or just follow along as we dive into each of the types and learn how to use them. --- Automating GraphQL Client Code Generation *Featuring Kevin Wolf @ 3:30pm - 4:30pm EDT* In this talk, we will learn how to streamline Front End Development by generating type-safe GraphQL Operations for Apollo Client. --- Building GraphQL Resolvers *Featuring Josh Oppenheim @ 5:00pm - 6:00pm EDT* Have you ever wanted to know how graphql resolvers work or why we use them? In this training we will talk about the philosophy behind resolvers and how they fit in the greater GraphQL flow. We will take a look at how the graphql-js library implements them and we will write some of our own. We will discuss some possible requests from consumers and write resolvers to accommodate the needs presented. --- Need private trainings for your company? If you would like to learn more about how you can leverage This Dot’s expertise to upskill your team, and reinvigorate your developers with new knowledge about the web’s leading development technologies, visit the trainings page....

Sep 23, 2020

2 mins

EnterpriseGeneralJavaScriptTraining

Svelte 5 is Here!

Svelte 5 was finally released after a long time in development. Fortunately, we've been able to test it for some time, and now it has a stable release. Let's dig into its features and why this is such a significant change, even though Svelte 4 code is almost 100% compatible. Svelte syntax everywhere This is one of my favorite additions. Previously, Svelte syntax was limited to a component element. Refactoring code from a component and moving it to a JavaScript file worked differently. Now you can use the .svelte.js or .svelte.ts extension, which allows you to use the same syntax everywhere. It's important to note that it's a way to express that this is not just JS, and what you write may be compiled to something else, just like .svelte files are not just html even though they look very similar. Runes The introduction of runes is one of the most significant changes in Svelte. Many users felt attracted to variables being instantly reactive in previous versions. ` There was, however, a lot of magic underneath and a considerable amount of work from the compiler to make it behave reactively. $state In Svelte 5, a reactive variable has to be explicitly declared using the $state rune, which brings a clear distinction between what is reactive and what isn’t. ` In the previous code, $state is not an actual function being called; it's a hint for the compiler to do something special with this declaration. Rune names always start with a dollar sign ($) and do not need to be imported. However, there’s much more to the changes than just the way we declare reactive variables. Runes bring a lot of new features that make Svelte 5 a great improvement. In Svelte 5, objects or arrays use Proxies to allow for granular reactivity, meaning that individual properties in an object are reactive, even if they are nested objects or arrays. If you modify a property, it will only update that property and will not trigger an update on the whole object. It also supports triggering updates when methods like array.push are called. In previous versions, an assignment was required to trigger an update: ` To have a similar behavior of svelte 4 (no deep reactivity), use the $state.raw() rune. This syntax of .* is common for related features of a rune: $state.raw() will require an assignment to trigger reactivity. ` Because proxies are used, you may need to extract the underlying state instead of the proxy itself. In that case, $state.snapshot() should be used: ` $derived We will use $derived and $derived.by to declare a derived state. The two runes are essentially the same, except one allows us to use a function instead of an expression, allowing for more complex operations to calculate the derived values. ` $effect Effects are useful for running something triggered by a change in state. One of the things you'll note from the $effect rune is that dependencies don't need to be explicit. Those will be picked from reactive values read synchronously in the body of the effect function. ` Something to bear in mind is that these dependencies are picked each time the effect runs. The values read during the last run become the dependencies of the effect. ` Depending on the result of the random method, foo or bar will stop being a dependency of the effect. You should place them outside the condition so they can trigger reruns of the effect. *Variants* of the effect rune are $effect.pre, which runs before a DOM update, and $effect.tracking(), which checks for the context of the effect (true for an effect inside an effect or in the template). $props This rune replaces the export let keywords used in previous versions to define a component's props. To use the $props syntax, we can consider it to return an object with all the properties a component receives. We can use JavaScript syntax to destructure it or use the rest property if we want to retrieve every property not explicitly destructured.. ` $bindable If you want to mutate a prop so that the change flows back to the parent, you can use the $bindable prop to make it work in both directions. A parent component can pass a value to a child component, and the child component is able to modify it, returning the data back to the parent component. ` $inspect The $inspect rune only works in dev mode and will track dependencies deeply. By default, it will call console.log with the provided argument whenever it detects a change. To change the underlying function, use $inspect.with().with): ` $host The host rune gives access to the host element when compiling as a custom element: ` ` Other changes Another important change is that component events are just props in Svelte 5, so you can destructure them using the $props() rune: ` A special children property can be used to project content into a component instead of using slots. Inside the components, use the [@render[(https://svelte.dev/docs/svelte/@render) tag to place them. ` Optional chaining (?.) prevents from attempting to render it if no children are passed in. If you need to render different components in different places (named slots before Svelte 5, you can pass them as any other prop, and use @render with them. Snippets Snippets allow us to declare markup slices and render them conveniently using the render tag (@render). They can take any number of arguments. ` Snippets can also be passed as props to other components. ` ` Conclusion Some exciting changes to the Svelte syntax were introduced while, at the same time, maximum compatibility efforts were made. This was a massive rewrite with numerous improvements in terms of performance, bundle size, and DX. Besides that, a new CLI has been released, making the whole experience of starting a project or adding features delightful. If you haven't tried Svelte before, it's a great time to try it now....

Nov 27, 2024

4 mins

Svelte

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

10 Mobile AR Apps That Are Creating the “New Normal” for Your Customers

This Dot

You might also like

Detect Hand Sign Languages with Tensorflow

Let Purpose Drive Your Artificial Intelligence Transformation

Announcing October JavaScript Marathon - Free, online training!

Svelte 5 is Here!

Let's innovate together!

You might also like

Detect Hand Sign Languages with Tensorflow

Let Purpose Drive Your Artificial Intelligence Transformation

Announcing October JavaScript Marathon - Free, online training!

Svelte 5 is Here!