CtrlStack

ctrlstack

Startups of The Year 2023 Winners: North America 

Learn Multithreading in Python Like A Pro Using These 30 Questions

Today, we will demystify the . All those fancy terms like Callstack and Callback queue may sound complicated, but don't worry! I recall how tough it was when I initially started learning about it three years ago. JavaScript event loop I will guide you through the event loop in a way that I wish someone had guided me. So, let's dive in and explore the following concepts together: Callstack queue Callback queue Event loop. Understanding these concepts is crucial for becoming a proficient JavaScript developer, and by the end of this article, you will have a clear understanding of how they work together. Are you ready? Then click that ❤️ button on the right, and Let's get started. Warm-up While writing your day-to-day code, you may not actively think about the event loop, but it will likely be useful to understand at some point. It's also a commonly discussed topic in job interviews. JavaScript operates on a single thread, allowing it to process instructions one at a time. Hey, just a quick heads-up: you can actually spawn a to run computations in parallel! It's pretty neat, but keep in mind that it has specific use cases, and there's one important thing to note: you won't be able to access the DOM from within the Web Worker. Just something to be aware of 🙂 Web Worker Let's check out this code together! Can you take a guess at what the output will be? console.log("A");

setTimeout(function() {
    console.log("B");
}, 0);

console.log("C"); What do you think the output will be? Notice how I scheduled a timer with , but I'm saying it should be called 0 milliseconds in the future. setTimeout Will the output be: or A B C A C B? Take a guess 🤔 , , and then are the answer. A C B Honestly, I don't expect you to get it right. It's a tricky piece of code, and that's why I'm here to help. In this post, I'll spend the whole time explaining how this code works. So, let's dive in hacker 🦾 The Mighty Callstack Think of the call stack as an array where the JavaScript interpreter keeps track of the code you're running. Let's consider the following code as an example: console.log("A");

console.log("B"); Let's talk about the call stack: It begins empty. Next, the JavaScript interpreter adds the first line to the call stack. So, at this moment, the call stack holds . console.log("A") The statement is executed, which prints to the console. After that, this instruction is removed from the call stack, leaving it empty again. console.log("A") "A" Then, is added to the call stack. console.log("B") This line is executed, resulting in being logged to the console. Once again, this instruction is removed from the call stack, leaving it empty. "B" Check out this excellent tool below that visualizes the call stack loop (and more): (It helps you visualize this) loupe - example 1 Let's put the Web APIs and callback queue aside for a moment. Simply click on (I've already filled in the code for you), and take a peek at the Call stack. Save & run Let's Look at an Example With a Function Keep in mind that I won't use ES2015 since the tool doesn't support it since it was written over 7 years ago. However, the concepts still apply to arrow functions. loupe function init() {
    console.log("A");
    console.log("B");
}

init(); Let me walk you through how the call stack is filled in this example: Initially, the call stack is empty. The function is defined but not called, so it doesn't go into the call stack. The call stack stores the instructions that need to be executed. init() When the execution encounters the call to , it is added to the call stack because it can be executed. init() At this point, remains in the call stack, and the JavaScript interpreter starts reading the code inside the function line by line. init() The line is added to the call stack. Now, the call stack contains both and . console.log("A") init() console.log("A") The line is executed, which logs to the console. Then, is removed from the call stack. So, the call stack now only contains . console.log("A") "A" console.log("A") init() The next line, , is executed. It logs to the console, and then is removed from the call stack. Again, the call stack only contains . console.log("B") "B" console.log("B") init() Since there are no more lines to execute inside the function, is removed from the call stack, and the call stack becomes empty once again. init() init() Let's take a moment to visualize the call stack using the same tool as before. . Open the loupe, and check out example 2 Enters Callback Queue When I introduce or other Web APIs, things can get a little trickier. These Web APIs work differently because of how JavaScript is designed and how it interacts with the visual part of the Browser (like the DOM, user interactions, network requests, and more). setTimeout So, instead of functions being executed immediately and added to the call stack, there is an intermediate step when using Web APIs like . Let's see an example below: setTimeout setTimeout(function logA() {
    console.log("A");
}, 5_000); I named the function so that when we visualize this example, it will appear as instead of being anonymous. logA logA Here's how this code runs step by step: The call stack starts empty. Then the code is added to the call stack. setTimeout(function logA() {...}, 5_000); It gets executed, instructing the browser to create a timer for 5 seconds. The call stack becomes empty again (as the timer has been set). After approximately 5 seconds, the timer elapses, and the browser notifies JavaScript that it's time to call the function. However, the function cannot be directly added to the call stack. logA Instead, it is added to the callback queue, which is a separate "array" that stores callbacks from WebAPIs like . setTimeout Currently, the call stack is still empty, but the callback queue contains . logA() Since the call stack is empty, it can process the next item in the callback queue (we'll explore this further in the next lesson). Therefore, is moved from the callback queue to the call stack. logA() is executed, which adds to the call stack, executes it, and then removes it. logA() console.log("A") There's a bunch of stuff happening here, but don't worry, you can totally grasp it if you follow these two recommendations: Take a look at the visualization: . loupe - example 3 Give the explanation above another read. Keep repeating steps 1 and 2 until everything becomes clear. And hey, if it's still not clear, just let me know in the comments. I'm here to help 😀 Why Did They Design It Like This? The main reason for this is to improve performance. JavaScript operates on a single thread, which means it has to handle several tasks simultaneously, such as running your code, rendering the screen (including CSS calculations and pixel drawing), and responding to user interactions like button clicks or page scrolling. All of these tasks happen on the same thread. When the call stack becomes overloaded with a lot of tasks, it can cause your website to become unresponsive. To avoid this issue, the browser utilizes a scheduling system for Web API calls. This system allows the browser to defer these tasks until the call stack is empty, ensuring that your website remains responsive. However, it's important to note that the event loop, while effective in managing these tasks, is not a perfect design. It's still possible to inadvertently slow down your website due to the way JavaScript operates inside the browser. Let's Talk About the Event Loop Now that we understand the and the , let's dive into the event loop, which is a straightforward part of the equation. call stack callback queue The event loop performs a task: it constantly checks if there are any items in the and sends them to the , but only when the call stack is not occupied. callback queue call stack Take a look at this example: . loupe - example 4 Observe how the callback queue accumulates three instructions - , , and . Then, the event loop (depicted as an orange circle with arrows) forwards these tasks one by one, but only when the call stack is free. logA logB logC Let's Revisit the Initial Example console.log("A");
setTimeout(function logB() {
    console.log("B");
}, 0);
console.log("C"); The call goes through the callback queue, so it runs after . That's why you'll see , , and then in the console. Give it a try yourself on . setTimeout console.log("C") A C B loupe - example 5 The setTimeout When you use , it won't actually happen instantly in 0 milliseconds. Instead, there will be a few milliseconds that pass before the code executes. setTimeout(..., 0) This delay occurs because the code needs to go through the browser to schedule a timer for 0 milliseconds, then it enters the and waits for the to be empty before running. callback queue call stack JavaScript Video Highlights: Event Loop & Similar APIs I want to share some great videos with you that I think you'll find really helpful and interesting. One of the most-watched talks in the JavaScript community is Philip Roberts’ talk at JS Conf. It's a fantastic talk, and there's a good reason why so many people love it. By the way, Philip Roberts is also the creator of the tool that you've been using in this post. loupe Pretty cool, right? https://www.youtube.com/watch?v=8aGhZQkoFbQ&embedable=true I really think you should set aside some time to watch his 25-minute talk on the event loop titled What the heck is the event loop anyway? Believe me, this video will teach you so much. I still go back to it every now and then to refresh my knowledge. https://www.youtube.com/watch?v=cCOL7MC4Pl0&embedable=true And guess what? There's a of this topic available, which covers other similar APIs. It's called by Jake Archibald. I also recommend checking it out. I hope you enjoy these videos and find them valuable for your career 😃 newer version In the Loop Keep Exploring Hacker You did an amazing job 🥳 I've worked hard to demystify the event loop and provide you with clear explanations and examples. Remember, learning about the event loop is an ongoing process. It's completely normal to face challenges along the way, so don't hesitate to ask me any questions. Your feedback and concerns mean a lot to me, so please share them in the comments below. If you found this article helpful, make sure to click the ❤️ button on the top right. Also, feel free to explore my other recent posts on HackerNoon (just scroll down a bit to find them). Keep up the great work on your learning journey, and happy coding 👋

Understanding the Javascript Event Loop (Everything You Need to Know)

Why Use React Native for Mobile App Development Why Choose React Native for Mobile App Development? React Native gives you full freedom to choose the tools, architecture, and extensive libraries for developing a mobile app. There has been a paradigm shift in mobile-first strategy. This is most often via technology: HTML, CSS, JavaScript, and in that context, front-end development libraries and frameworks such as React, Flutter, Java, Swift, JQuery Mobile, Python, Mobile Angular UI, and NativeScript are becoming the dominant standard in the mobile app development. However, there is a lot of confusion surrounding overly marketed development “framework” and “libraries,” especially given the rise of new capabilities in mobile app development technologies. These development frameworks or libraries are not new, but a confluence of digital disruptions has led to an influx of tools and technologies to meet rising demand. Thus, selecting the most appropriate ones is important to achieve business outcomes and deliver successful business innovation. Amongst different frameworks, we are taking a React Native point of view for mobile app development. What is React Native As defined on the official website of the project – it is a “JavaScript library for building user interfaces.” React Native is developed by Facebook. It is much older compared with other Mobile App development such as Angular or Flutter. React Native, along with React.js, is used by IT giants such as Facebook, Instagram, Airbnb, Netflix, Soundcloud, and Uber Eats. Flexibility and Compatibility for Faster Development React Native gives you full freedom to choose the tools, architecture, and extensive libraries for developing a mobile app. Compatibility with other libraries React Native is component-based, which makes it utterly flexible. As a library, it can be paired with almost any other JS library or framework. Moreover, it offers plenty of its own libraries and tools and can be packaged with other programming libraries, facilitating and accelerating the mobile app development process. It also allows you to use 3rd party libraries. Logical componentization Components are independent and reusable bits of code. React Native is a component-based library. In fact, it can be used as “blocks” to build an interface. It provides ready-made components to significantly reduce the development cycle and minimize the mobile app development cost. For e.g., if you are building a large-scale mobile app without using any framework, then that would require thousands of lines of code. Using React Native, you do not have to write every line of code. If you need a platform-specific component, you can easily import it into your app. Developers can focus more on the logic and spend less time on styling the components. Moreover, they can easily manage updates and modifications of components. Code re-usability and cost-effective React Native can be used for developing a mobile app for platforms or devices such as Android and iOS. It enables you to build native applications over hybrid apps that run on a web view. Any code written in React Native can be used on multiple mediums. You can write code once and deploy it across many platforms, like Android, iOS, and more, making the project less expensive and more profitable. Lighter and Faster Performance Faster Refresh Rate Using JavaScript capabilities, React Native provides you mobile app experience at lightning speed. No more delays for native builds to finish. The framework is fully capable of handling complex project scenarios. Whether you want to develop native apps, hybrid apps, or specific iOS or Android apps, React Native works perfectly. It is ideal for native-rendered apps for Android and iOS devices. Innovative User Experience React Native is one of the top choices of organizations because it gives special attention to designing the UI of the app. It is entirely responsive and has fantastic rendering capabilities. Its responsive components respond to different screen sizes, adjusting its contents to the optimal layout for the given parameters. All these factors contribute deeply to designing innovative user interfaces. Higher Performance React Native has an edge in performance due to some unique components. The ListView component is one of the components that help improve the performance and user experience of the app. Further, with React Native, the data-binding process is unidirectional, meaning that bindings are not assigned watchers, and consequently, the workload is reduced. React Native is perfect for managing heavy loads with relative ease. Easy Integration & Maintenance and Future Proof Developer friendly React Native allows you to manage the code according to your desired format. It gives you the option to choose without putting any performance penalty. It does not restrict you from using large models. Developers can spend more time writing modern JavaScript and less time worrying about framework-specific code. React Native can be written in JavaScript ES6+ combined with JSX script, which consists of an extension for syntax. Easy to maintain and extend React Native provides a flexible front-end and a simple and stateless architecture that helps you easily understand code, maintain your app for multiple devices and extend as it grows. You can embed it in other apps, and other applications can also be embedded in React Native. You can integrate with jQuery and Backbone, plus the same concepts can be applied to integrating components with any existing code. Strong community Enterprises often consider React Native because its components and libraries are known to meet the needs of professional developers. React Native has a community of millions of developers. This directly benefits others with the availability of ready-made components and solutions. The growing additions of libraries in React Native provide access to a diverse range of components that can be used in mobile app development projects to minimize the implementation time. Moreover, there is continuous support from Facebook, which contributes to enhancing React Native’s capabilities, resources, and popularity. Today, React Native is supported by contributions from individuals and companies worldwide, including Callstack, Expo, Infinite Red, Microsoft, and Software Mansion. Closing Remarks React Native provides varied methods to mobile application development for startups, SMBs, and small and medium enterprises (SMEs). This framework is quite prevailing and easily adaptable for its growing capabilities, functionality, and usability. If you care about a mobile app development framework that just needs to be learned once and can be deployed anywhere? React Native could be the right answer. Though it also depends on your mobile development project specifications, technological preferences, and overall business requirements. But you do not always need to create different codebases all the time when a single codebase can do the job across multiple platforms. Manish Singh Co-founder and CEO at Minds Task Technologies. Manish helps businesses bring their digital vision to life by delivering scalable technology solutions. I am a technologist, entrepreneur, and quester. I have always been passionate about solving problems through technology. I have spent my last 15 years in the IT industry building solutions for various verticals like eCommerce, Manufacturing, Real estate, Food and Beverages, and MLM. Also Published Here

React Native - The Future of Mobile App Development

by Michał Pierzchała Have you ever heard about entropy? As Stephen Hawking framed it: You may see a cup of tea fall off a table and break into pieces on the floor... But you will never see the cup gather itself back together and jump back on the table. The increase of disorder, or entropy, is what distinguishes the past from the future, giving a direction to time. In other words: . things will fall apart eventually when unattended But let’s not get too depressed or comfortable with things just turning into chaos naturally. We can and do fight back against it. We can exert effort to create useful types of order resilient enough to withstand the unrelenting pull of entropy by expending energy. Let’s start from the beginning. What Does a Development Cycle Look Like? When developing software, we feel entropy. That’s why we usually put extra effort into following some development cycle. For example, we start with adding a new feature. During development, we sprinkle it with a bunch of tests. When we’re done, we send it to QAs. They accept it and promote our code to a production release channel. And we’re back to adding another feature. That’s quite a simplified version of what we usually do. Because, among other things, we don’t take into account that wild bugs may appear! Our experience tells us to keep it cool, identify the root cause, and so it never breaks again. Then we send it to QA once again, ship it, and go back to adding features. add a regression test We’re happier with our workflow now; it works well. We’re adding feature after feature. Our app release cycle is so well designed that even adding ten new developers doesn’t slow us down. Until we take a look at our app reviews: Why Do You Need to Continuously Monitor the Performance of Your App? We realize that our perfect workflow based on Science™, our experience, and “best practices,” which were supposed to prevent our app from falling apart, is not resilient to particular bugs. Namely, performance regressions. Our codebase doesn’t have the tools to fight these. We know how to fix the issues once spotted, but we have no way to spot them before they hit our users. Coming back to our entropy example, in other words, we could say that performance will fall apart eventually when unattended. while adding new code and letting the time go by, If we don’t do anything to optimize our app it will certainly get slower. We don’t know when it will happen. Maybe tomorrow, maybe in a week, or a year. If only there’s been an established way of catching some of the regressions early in the development process… Wait a minute, there is! How to Monitor App Performance Regression? With fully automated regression tests! Tests that run in a remote environment on every code change, and that already are a part of our development process. Before we pick the best tool for the job, let’s consider the impact and what’s worth testing. The Most Common React (Native) Performance Issues As with test coverage, there’s a healthy ratio that we strive for to provide us with the best value for the lowest amount of effort. We want to target regressions that are most likely to hit our users. At , we identified React Native performance issues our developers deal with daily. Callstack Slow lists and images, SVGs, React Context misusage, re-renders, and slow TTI, are among the most common ones. If we look at this list from the origin of the issue point of view, we’ll notice that a vast majority of these come from the JS side. We estimate that most of the time our developers spend fixing performance issues, around Only the rest is bridge communication overhead and native code – like image rendering or database operations – working inefficiently. 80%, originates from the JS realm, especially from React misusage. It’s fair to say that we expect to encounter these problems in both React web apps and React Native mobile apps. We did our research and didn’t find any library allowing us to reliably write performance regression tests for React or React Native. We’d like to have it integrated with the existing ecosystem of libraries we’re using. The perfect library for measuring performance regression should: measure render times and count reliably, have a CI runner, generate readable and parseable reports, provide helpful insights for code review, and have a stable design based on React public API. Using our experience from developing the , we created We developed it in partnership with – one of the world’s largest sports betting and gaming groups. React Native Testing Library —a performance regression testing companion for React and React Native components. Reassure Entain How Does Reassure Work? Reassure builds on top of your existing React Testing Library setup and sprinkles it with an unobtrusive performance measurement API. It’s designed to be as a part of your continuous integration suite. run on a remote server environment To increase the stability of results and decrease flakiness, Reassure will run your tests once for the current branch and another for the base branch. In the near future, with sufficiently stable CI, we’ll be able only to run the tests once and compare the results with the ones from the past. To ensure a delightful Developer Experience, Reassure . Currently, we leverage Danger.js as our bot backend, but in the future, we’d like to prepare a plug-and-play GitHub Action. integrates with GitHub to enhance the code review process Let’s take a look at what it takes to incorporate Reassure into your regression testing pipeline. Write Performance Regression Tests Before you write your first test, you need to install Reassure: yarn add --dev reassure
# or 
npm install --save-dev reassure Now, you can start writing your performance tests. Let’s take a look at this example: // counter.perf-test.tsx
test('Count increments on press', async () => {
  const scenario = async (screen: RenderAPI) => {
    const button = screen.getByText('Action');
    
    await screen.findByText('Count: 0’);
    fireEvent.press(button);
    fireEvent.press(button);
    await screen.findByText('Count: 2');
  };
 
  const stats = await measurePerformance(
    <Counter />, 
    { scenario, runs: 20 }
  );
await writeTestStats(stats);
}); We created a new file with the “.perf-test.tsx” extension that reuses our component test in a function. It takes an optional argument which is, in fact, a return value of Testing Library’s helper. scenario screen render The scenario is then used by the method from Reassure, which renders our Counter component, in this case, 20 times, letting the React Profiler measure render count and duration times for us. In the end, we call to save this data to the filesystem. measurePerformance writeTestStats And that’s usually all you have to write. Copy-paste your existing tests, adjust, and enjoy your app being a little bit safer with every test. Run Reassure Now that you have your first performance regression test created, it’s time to run Reassure somehow! It’s important to mention that you need to measure the performance of two versions of your code – the current (modified one) and the baseline. Reassure will compare the two to determine whether there are any regressions in the current code version. Since the goal is to run the performance tests on the CI environment, we want to automate this task. To do that, you will need to create a performance testing script, like this one: # Gather baseline perf measurements
git switch main
yarn install --force
yarn reassure --baseline
 
# Gather current perf measurements & compare results
git switch -
yarn install --force
yarn reassure And save it in your repository, e.g., as . reassure-tests.sh The script switches to your base branch, installs dependencies, and runs to gather the base metrics. Once done, it switches back to your current feature branch, installs dependencies again, as those might have changed, and runs again. yarn reassure --baseline yarn reassure See the Performance Test Results Having all that data, Reassure can present the render duration times as statistically significant or meaningless. Apart from render times, another useful metric that may easily degrade is render counts, which we get for free from React Profiler. All this information is stored in a JSON format for further analysis and Markdown for readability. We use the markdown output as a source for the GitHub commenting bot powered by . DangerJS This is by far our favorite and recommended usage of this tool, as it enriches the code review process while allowing us to alleviate the instability of the CI we’re using. What Have We Learned From Developing Reassure? Developing Reassure has taught us some valuable lessons about running benchmarks with Node.js, and measuring precision in JavaScript. Let’s dive into it! Challenges of Running Benchmarks With Node.js Running benchmarks is not a piece of cake even in non-JS environments, but it’s . particularly tricky with Node.js The key is . Operating in a JavaScript VM, we need to considerJIT, garbage collection, and module resolution caching. embracing stability and avoiding flakiness Then we have a cost of concurrency that our test runner embraces for execution speed. We need to pick what to average, what to percentile, and how to apply statistical analysis. And a lot more. Running tests once or twice is not enough to make sure our measurement results make sense mathematically. Taking other things into account, ten times is a good baseline for our use case. Then to determine the probability of the result being statistically significant, we need to calculate the z-score, which needs the mean value (or average), divergence, and standard deviation. Reassure handles all of that for you, so you don’t even have to think about it. What You Probably Didn’t Know About Measurement Precision in JavaScript Measurement precision is another tricky topic in the JS land. React Profiler uses API to reliably measure rendering time. Node.js implements the W3C recommendation, which—due to privacy concerns—requires a resolution of no less than 5 microseconds. performance.now() We can measure a 1 ms render with at least 0.5% error. This is usually good enough. But because many lighter components render faster than 1 ms, and due to the variable stability of the machine, we run them at least ten times anyway and let you configure that as well. Now, module resolution caching is great for our Node.js apps. But it bothered us when developing the library. As it turned out, As you can imagine, averaging that would make the results unreliable. So we drop the slowest test as most likely it’s skewed by the lack of cache. subsequent execution of the same component often resulted in even ten times slower runs. Wrapping Up Even if you don’t have performance issues at the moment, they will appear sooner or later. We speak from our experience with many clients. Reassure will allow you to spot them once they appear. With Reassure, you can test whole screens or even screen sequences perform component level tests are possible but often require more runs reuse your RNTL tests if you have them, and all established Testing Library practices apply, so let your tests resemble users’ behavior and avoid mocking anything other than I/O. Due to their qualities, frontend perf tests seem to resemble end-to-end tests for our apps. And it makes sense to treat them as such in our testing trophies or pyramids. Remember that performance is not a goal. It’s a path. Walk it with confidence. Reassure Is Open Source Like all of the tools we build at Callstack, Reassure is an Open Source Software, released under an MIT license. Feel free to check it out on to see the complete installation and usage guide. And if you liked it— ! GitHub star it We’re excited to see how you use it and how it helps you guard the performance of your apps. So, don’t be afraid to hit the “Issues” tab to let us know. And if you want to listen to a talk with me, , and our host, , take a look at one of the episodes of . Maciej Jastrzębski Łukasz Chludziński The React Native Show https://youtu.be/8pTQKBHFs-8?embedable=true Happy testing! Photo by on Luis Villasmil Unsplash

How Reassure Makes Continuous App Performance Monitoring Simple 

Hermes is now available on iOS as of – the latest version of React Native comes with support for the on iOS. We describe the full process of bringing Hermes to iOS in a series of articles: React Native 0.64 Hermes engine Bringing Hermes to iOS in React Native 0.64 Hermes Performance on iOS: How it Compares with JSC (you are here) Technical Guide, Part 1: Compiling Hermes for Apple Platforms Technical Guide, Part 2: Integrating Hermes with React Native While the first two provide detailed information about Hermes and its performance, respectively, the last ones offer practical guidance on Hermes implementation. This article is a high-level overview of Hermes on iOS, including the benchmarks and results of running Hermes in production. Hermes performance on iOS compared with JavaScriptCore (JSC) Let’s take a closer look at Hermes performance: should you choose it in favor of JSC on iOS as well? Is it actually faster? What kind of improvements (if any) can you expect? We are going to address all these questions so read on to find out how things are. React Native is now really fast. Hermes on iOS made the app start ~40% faster than JSC. TL;DR Methodology We decided to use a as an environment for our profiling. It is an React Native mobile application. Thanks to its advanced interactions and extensive functionality, it represents a real world application that we all might be building one day. Mattermost mobile application open source On top of that, it was used by Facebook to . This will be a good reference to compare the scale of improvements with Android itself. measure Hermes performance on Android We measured the following three components: Time to Interactive (TTI) that describes the time from the cold application start till it becomes ready for user interactions. Memory that is being used by the React Native application once started. Size taken by the final application on the disk with the Hermes engine included. To better visualize the TTI difference, we have a) recorded and included a side-by-side breakdown of an application launching with both Hermes enabled and disabled and b) performed that test on a different set of Apple devices, from iPhone 12 mini, iPhone X to iPhone 6 Plus. Note: Time to Interactive (TTI) We measured the time for the app to become usable. Everything between pressing the app icon and seeing the first screen rendered was measured multiple times to get the final results. We can see that mobile applications with Hermes launch faster than a regular React Native app on all tested devices. The difference is least significant on the latest iPhone 12 family that is powered by A14 Bionic. We can see it grows as we run the test suite on older devices. For example, on the iPhone 6 Plus (that I remember buying a brand new not so while ago), it is 2.5s! If you are not sure whether these numbers make a difference, take a look at the side-by-side video recording we have done on each of these devices. Fun fact, while doing it myself, I have learnt that I am able to notice half a second difference! iPhone 12 Mini Left side: Hermes, right side: RN without HermesiPhone X Left side: Hermes, right side: RN without HermesiPhone 6 Plus Left side: Hermes, right side: RN without Hermes Memory On iPhone 12 with the enabled Hermes engine the average memory usage for the Mattermost application is around 178mb. In an application without Hermes memory, the same actions use around 216mb. Apparently, there is 38mb improvement in memory usage. For such an application – an application that displays loads of data – this is a great change. Size On iPhone 12, the application with Hermes engine included was 2 megabytes larger in size overall. That is not a surprise – JSC comes built-in with every iOS version and there is no need to ship it separately. Besides including the Hermes engine itself, we’re also generating a bytecode bundle which contributes to it. I think this is really good news – 2 megabytes is not much and it will have less of an impact the larger your codebase is. Conclusion It’s been really fun playing around with Hermes on iOS with React Native 0.64 and testing it out on Mattermost example. Unless there is something stopping you from upgrading to the latest release, I highly recommend trying it out. The TTI improvements alone are remarkable – your users will definitely enjoy your application launching in a blink of an eye! Also published on: https://callstack.com/blog/hermes-performance-on-ios/ Looking for more iOS articles like this? Be sure to subscribe to our newsletter in the footer below!

Hermes Performance on iOS Compared to JavaScriptCore (JSC)

For a long time, – it was optimized for running React Native apps on Android only. Now it’s finally Hermes was exclusive to Android available on iOS as well. In the last few months, we’ve worked really hard with teams at Facebook and Microsoft to bring Hermes to iOS. It’s part of the which we contributed to. latest React Native 0.64 release Today we’d like to share with you the steps we took here, at Callstack, to make it all possible. We also have a series of benchmarks ready to better demonstrate Hermes's performance compared to JSC in the context of React Native. In order to outline the journey to Hermes iOS comprehensively, we are going to publish a series of articles: Bringing Hermes to iOS in React Native 0.64 (you are here) Hermes Performance on iOS: How it Compares with JSC Technical Guide, Part 1: Compiling Hermes for Apple Platforms Technical Guide, Part 2: Integrating Hermes with React Native The technical pieces will focus on implementation details, guiding you through the internals of React Native and showing how we brought Hermes to iOS as well as how you can use your own custom engine yourself! But first things first – let’s start with talking about the beginnings of the Hermes engine. JavaScript engine in a React Native app Hermes is a JavaScript engine, so let’s clarify first what JS engines do. A JavaScript engine runs your application code and makes the browser perform the desired actions. All modern JS engines are designed and benchmarked to run with maximum efficiency under the browsers’ most popular use case (i.e. providing an interactive website or a web application that users can interact with). React Native apps, despite being written in JavaScript, are different from a typical website or a web application created with React. They use neither HTML nor CSS. Instead of interacting with DOM, when , a native code is shipped for both iOS and Android, respectively. The code is responsible for painting elements on a mobile screen and responding to the user’s interactions. building apps with React Native User expectations for mobile and web There’s also a difference in the way users expect mobile and web applications to work. On mobile, the user tends to be more demanding when it comes to overall . Applications must launch in a blink of an eye and become interactive as quickly as possible. The web, on the other hand, is a different story. The conversion is less likely to drop if a website doesn’t load instantly. app performance It’s no surprise then that using a JavaScript engine designed for the web makes it harder (if not impossible in certain scenarios) to meet the high standard in the mobile world – the standards that fully-native applications often reach by default. Benefits of Hermes running on Android That’s one of the many reasons why the Facebook team created Hermes – a JavaScript engine designed specifically for running React Native applications. At a high level, it is an engine like any other. Under the hood, it implements a lot of optimizations to make React Native run as fast as it can. The biggest difference is that Hermes is an AOT engine. In other words, unlike most JavaScript engines, it doesn’t parse and compile your JavaScript code at runtime. It shifts all these steps to happen at a build time – when you bundle your React Native application before sending it to the App Store. Data source: Facebook engineers Since its launch on Android, the results are remarkable! It not only offers a smooth transition for the majority of users, but also provides significant improvements to startup times together with CPU and memory consumption. For a more , check the Facebook Engineers blog. detailed description of Hermes on Android Please keep in mind that the numbers shown in the graph are relevant for Android only and as such, they do not guarantee the same improvements on iOS. In fact, as we learn in the next section, it is possible that things like an application size can actually increase a bit. Bringing Hermes to iOS Having the same JavaScript engine on both Android and iOS allows us to fully embrace its features. It also makes the development easier and provides a more stable experience with resolving fewer platform-specific issues. Ever since the first React Native release, both platforms used JavaScriptCore – the one and only engine on iOS that was set to be used on Android as well. Theoretically, Android could have used V8 or a different engine, but that would contradict my previous point. Now that Android has Hermes support and that’s been getting more and more popular with every React Native release, it would be great to have it on iOS as well. Only when Hermes can be run on both iOS and Android, the React Native team can take advantage of its features and start embracing its full potential. Potential risks The JavaScriptCore wasn’t selected as a default engine for a reason. On Apple devices, it is prohibited to ship mobile applications that run JavaScript using a different JIT engine than the one originally provided with the system. Since Hermes is an AOT engine, these restrictions do not apply. Theoretically, it is possible to build and ship apps with Hermes provided that the Hermes engine can compile on iOS. However, choosing a different engine than the built-in one has the risk of increasing the overall application size as now it has to ship its own engine rather than rely on the one available on iOS by default. Try Hermes yourself Hermes is now available under a flag on iOS, starting from React Native 0.64. Check out to find out how to turn it on! I am really excited to see what you end up building on top of it! my post on the official React Native blog In case you are still having doubts about using Hermes with React Native on iOS, worry not – we have run a together with metrics and videos. Here’s a little secret – it’s faster! series of benchmarks comparing Hermes and JSC on iOS Previously published at https://callstack.com/blog/bringing-hermes-to-ios-in-react-native/

How We Helped Bring Hermes to iOS in React Native 0.64

As we know, as well. It also allows us to make repositories, commits, branches, and pull requests. With such great community contribution comes the problem to find the most helpful repos. So I thought of making a curated blog having the list of most helpful repos ever, which will be updated from time to time also! GitHub is a collaborative platform for developers, it lets us work together and contribute to the community Some of the repos will be including helpful resources while some will help you become a better software engineer and developer. So without any further ado, let’s get started. 1. Public APIs Github Stars: 105K As the name suggests, contains a and apps. Animals, Games & Comics, Machine Learning, Music, News, Open Source Projects, Photography, Sports ,etc. Public API list of free APIs which can be used for building projects This is a comprehensive collection of data so go and check it out now. Link : https://github.com/public-apis/public-apis 2. Build your own x Github Stars: 92K You must have guessed it by the name, is the repository every developer may want! Do you want to or your own Git? If yes, then go forward to fork this repo. It’s a collection of tutorials on how you can build your own technology. this invent your own programming language This is a fantastic repository for your project so go and check it out now. Link: https://github.com/danistefanovic/build-your-own-x 3. Automatic Udemy Course Enroller Github Stars: 2K So is the repository every student/learner or any learning freak who wants to LEARN NEW STUFF for FREE should have a look. As the name suggests, it allows you to enroll in . With the power of web-scraping and automation, it’s script finds the necessary Udemy coupons to let you enroll for this ANY PAID UDEMY COURSES FOR ABSOLUTELY FREE PAID UDEMY COURSES, ABSOLUTELY FREE! So what are you waiting for? Go and check it out. :) Link: https://github.com/aapatre/Automatic-Udemy-Course-Enroller-GET-PAID-UDEMY-COURSES-for-FREE 4. Free programming books Github Stars: 170K is another great repository for learners out there. It includes a List of with contributions from Karan Bhangui and George Stocker. It categorizes from This Freely Available Programming Books Free Online Courses, Cheat Sheets, Programming Resources, Free Podcasts and Screencasts, Problem Sets, and Competitive Programming. Go and fork it out to see it by yourself. ;) Link: https://github.com/EbookFoundation/free-programming-books 5. Sherlock Project Github Stars: 18.7K is an MIT licensed repository out there. It allows you to across social media networks. You can check the available This hunt down social media accounts by username list of supported sites by clicking here. Go and check it out! Link: https://github.com/sherlock-project/sherlock The world’s most used, cloud-based note-taking apps.medium.com 6. Coding Interview University Github Stars: 150K is a for learners who want to be a software engineer, smart enough to . It is best for the people who are beginners in the field of software engineering, where knowledge of CS is primarily required. The author himself got his dream job (at Amazon!) after following his created repo. This multi-month study planning-type of repository get selected in FAANG Go and Check it out ;) Link: https://github.com/jwasham/coding-interview-university 7. Web Developer Roadmap: Github Stars: 141K repo contains a set of showing different pathways and technologies , whether front-end, back-end, or dev-ops. It works as a guide to become better in the field. The best part is it gets updated annually so never gets out of the line! This roadmaps to become a web developer Start learning now. Link: https://github.com/kamranahmedse/developer-roadmap 8. JavaScript Algorithms + Data Structures Github Stars: 90.7K repo contains algorithms and data structures implemented in JavaScript with explanations and links to further readings. It comprises like a hash table, math, strings, heap, queue, stack, sets, and many more. The good side is that the examples are marked as a beginner or advanced according to their level of difficulty. This 100s of examples and illustrations of various popular algorithms and data structures of JavaScript Link: https://github.com/trekhleb/javascript-algorithms 9. React Native Paper Github Stars: 7.2K repo is a gift to geeks. It is basically a high-quality, standard-compliant . This repository has the material design for React Native, which is available for both Android & iOS. It offers Figma and Sketch component kits. This React Native Material Design library Go and try it once. Link: https://github.com/callstack/react-native-paper 10. Fast API Github Stars: 25K repository is an amazing 3.6+ based on standard Python type hints. It claims itself as one of the fastest Python frameworks available, and there’s no doubt in it. The key features are that Fast API is extremely fast to code, has fewer bugs, intuitive, easy, short, robust and standards-based. This web framework for building APIs with Python I myself had used it many times and the experience was awesome. You should check it out too. Link: https://github.com/tiangolo/fastapi That’s all for this blog. Hope it was useful to you. to let me know how it went and if it helped you anyhow. It will make me appreciate writing more. :) Leave a comment below Take care Also published at https://medium.com/code-studios/top-incredible-github-repositories-for-developers-and-students-3196099113ef

The Ten Most Starred Github Repositories

Asynchronous javascript is the backbone of modern web development. But understanding it comes with its challenges. Single threaded languages like Javascript can execute only one thing at a time, which can lead to unnecessary delays and code starvation. Slow functions block further code from executing. Hence, to avoid all this, asynchronous Javascript comes in the picture. It avoids the waiting which can happen due to single threaded execution. To understand asynchronicity, just the core Javascript engine is not enough. The core JS engine has three main parts Thread of execution Memory/ Variable Environment Callstack We need to add new components to it like Web browser APIs, Promises, Eventloop, Task queue and Microtask queue. As we know Javascript runs on the browser. The browser itself is a powerful program, which provides lot of features, some of which makes asynchronous code possible. These browser features are Dev Tools, Console, Sockets, Network Requests, Rendering(HTML DOM), Timer etc. Javascript has some functions which look like usual functions but are actually a means to interact with these web browsers features. I like to call them 'facade' functions. Examples of such 'facade' functions are: The document object which refers to the HTML DOM The fetch function which in turn interacts with the Network Requests The setTimeOut() function which refers to the Timer Let us try to understand this piece of code { .log( );
}
setTimeOut(printHello, ); .log( ); ( ) function printHello console 'Hello' 1000 console 'Me First' Firstly, the function definition of printHello will be saved in the global memory. The javascript facade function that is setTimeOut; the only job it has is to set the Timer to 1000ms and call the function printHello when it is complete. So once the facade function setTimeOut does that, it moves onto the next line and console logs 'Me First'. Meanwhile the timer runs and once it finishes, the function printHello is called. The flow of control jumps back to the main Javascript and it prints 'Hello'. That was a simple code snippet but what about when we need to execute thousands of lines of asynchronous code? We're interfacing with a world outside of Javascript, so we need some rules so that the flow of execution works smoothly. { .log( );
} { setTimeOut(printHello, );
blockfor1sec(); .log( ); ( ) function printHello console 'Hello' ( ) function blockfor1sec //blocks the thread for one second } 0 console 'Me First' In the above example since the timer is 0ms, one would assume that it runs printHello immediately. But that does not happen. Why? Javascript has this feature called 'Callback Queue'. The function printHello gets pushed into it, and remains there until JS engine runs all the synchronous code. Another feature the 'Event Loop' keeps a check on the callstack, whether it is empty or not, also if all the global code has finished executing. Once it is done, the event loop pulls the printHello function from the callback queue and pops it onto the call stack. ---------
Me first
Hello console So printHello function executes after the global code. Understanding this removes the fear of unpredictability while writing asynchronous javascript. There are some problems with this approach though. Suppose the function in setTimeOut is fetching some data from an API and then running another function with that data, we will not be in control of this data. This is because this function is automated by setTimeOut. The data that this  function carries is confined within it. The response data is confined with it. This creates a problem. This is made easier to handle with Promises. Promises So much of our javascript code which we execute is with the help of browser features, but we have no access to the 'backend' javascript running via browser features. New ES6 feature Promise help us have some sort of consistency between the things going in the background and our actual javascript memory and have some consequence on it. In ES5 we used fetch/xhr to get request on the internet but it didnt impact our actual memory. With the introduction of Promises in ES6, the fetch is going to make a network request whilst also returning an object 'Promise' which will be in our memory. Once the request is finished, the Promise object will be populated with the data from the request. Promises can be studied by keeping in mind the two pronged approach.  The first prong points to the background processes executing via the browser features while the second prong points to the Promise object in our global memory keeping track of the request. Using these two pronged 'facade' functions helps us initiate background web browser work return a placeholder object(promise) immediately in Javascript. { .log(data);
} futureData = fetch( );
futureData.then(display); .log( ); ( ) function display data console const 'https//somelink.com' console 'Me first' The above snippet illustrates a simple promise.  The value which we get back from the request is stored in futureData and is inturn passed onto as a parameter(data) to display function. To understand how all of this automated, we must understand what does fetch exactly do? Fetch function is one of most important Javascript function. It promptly executes the two pronged approach which we discussed earlier. It sets up a promise object in our JS memory. The object has two properties: which stores the response data and which is an empty array. value onFulfilled On the other hand, it also initiates browser feature Network Request to send a http request to the domain, get the response data. This is stored in the variable in which the request is stored, that is, in futureData, specifically in the value property of the futureData promise object. futureData.value = response data We must also inspect what is the purpose of onFulfilled[ ] property onFulfilled is a hidden property of the Promise object, we cant access it. As soon as the value property of the promise object gets some value, onFulfilled property automatically executes the function which was supposed to use the response data. This function is stored in the onFulfilled array. In the above snippet, as soon as the value property gets the response data, the display function is triggered by onFulfilled and the response data is passed as the argument for it. At this point, certainly the question must arise, how do we add a function to the onFulfilled array? We cant use array.push( ) since it is a hidden property. Instead we use a 'then' method. So that makes it rather simple. What about error handling in Promises? There might be many instances during which a network request might fail. How does a promise handle  failed request and null data? To solve this, a Promise object has one more hidden property on it, onRejection, which is as suspected, an empty array. We can use the '.catch()' method to add a function to it. This function will be triggered by onRejection and executed in case we get an error. Lastly we need to know, how does our Promise-deferred functionality gets back into javascript to be executed? There is a feature in javascript similar to callback queue, which is the 'Microtask Queue'. While the network request is being made and data is being fetched, the function associated with the Promise object, is pushed onto the microtask queue. As soon as the response data is populated, the function is pulled up from the microtask queue and popped onto the callstack by the event loop and executed. Microtask queue has a higher priority than Callback queue, so the functions associated with other aysnchronous features like setTimeOut( ) are executed after Promise object functions are done executing. That is a wrap for this post. I hope this article helped and thank you so much for reading. Happy Coding!

Asynchronous Javascript For Beginners

This is a hands-on course on how to deploy a fully Serverless web app using the . You will learn how to: AWS CDK Structure **CDK Stacks **to deploy an application from end-to-end Deploy a integrated with for dynamic requests processing Store data in a fast and cost-effective way with REST API AWS Lambda DynamoDB Use as a source for in an event-driven architecture DynamoDB streams Lambda Ingest and manipulate loads of data streams with Kinesis Firehose Deploy and query a with , and your entire application health in a single place using Data Lake Athena S3 GlueMonitor Dashbird You can use the resources declared in this demo application as a starting point to mix and adapt to your own architectures later, which should save you quite some time. The App and Architecture The demo app is a public blog where anyone can read, publish and like posts. It’s available . Go ahead and publish something in the top-left corner (yellow button) and also “like” articles already published. Check out the codebase on . on this link this repo Frontend Backend Data Lake and Analytical Querying What is the AWS CDK? CDK stands for Cloud Development Kit. Think of it as CloudFormation (CF) in your preferred language (Python, Typescript, C#, etc). Roughly speaking, it works like this: 1. You declare cloud resources using classes provided by the CDK libraries. Example: aws_cdk aws_s3
my_bucket = aws_s3.Bucket(self, ) from import 'MyBucket' 2. Run CDK deploy 3. CDK translates this to a CloudFormation template and deploy it on AWS for you. In case you would like to dig deeper, that will get your basics started. I also strongly recommend reading the . AWS also has a workshop official CDK documentation Advantages using the AWS CDK Use languages that are more expressive than YAML or JSON, for instance. Less - much less! - verbose than CloudFormation templates. Easier to apply reusability and inheritance principles to infrastructure code. Better integration with IDEs for code completion, IntelliSense, etc. Possible to test your infra code, just as any other software Portable: since it’s just a wrapper around CF, we can easily port it to JSON or YAML Disadvantages of using the AWS CDK Although released as a stable project by the AWS team, many parts (a lot of the good ones) are still experimental and APIs may change in backwards incompatible ways. It’s under constant development. During the preparation of this course, I had to upgrade my libraries three times. Documentation is still lacking at some parts and you will need to look at the CDK code, occasionally, to understand how to declare certain things. Deploy it yourself Although we have provided an online demo, you can also deploy this app in your own AWS account: Clone the repo: git clone git@github.com:byrro/serverless-website-demo.git sls-demo; cd sls-demo Setup your virtual environment: virtualenv -p /urs/bin/python3.8 .env; source .env/bin/activate; pip install -r requirements Specify an AWS account ID: ** export AWS_ACCOUNT_ID=1234567890 Deploy all three stacks: cdk deploy sls-blog; cdk deploy sls-blog-api; cdk deploy sls-blog-analytical ** You can also hard code your Account ID in the CDK project, as I’ll show in a minute; When starting a new project from scratch, you would run . This is not necessary for this demo, since the project is already created. cdk init --language [python|typescript|...] Monitoring Deploying this architecture in the cloud and blindly believing it will work flawlessly is not reasonable. We want to be the first one to know when something is not right to act upon it as quickly as possible. In this project, I used for its ease of use and seamless integration. Instead of having to deploy an agent inside my code, Dashbird plugs into my Stacks that I can deploy with the effort of one click. It not only monitors Lambda function errors, but also other resources that we’re using, such as DynamoDB tables. They even suggest cross-referenced against industry best practices. Dashbird through a CloudFormation template insights for architectural improvements Finally, Dashbird offers a free-forever plan. It’s a no-brainer to try it out by . registering for free How a CDK project is structured A CDK project creates an “Application”. This app may have one or more “Stacks”. A Stack is a group of cloud resources (Lambda functions, S3 buckets, etc) that are instantiated using CDK classes. It’s also possible to have multiple applications in a single CDK project. App Object Creating a CDK app is as simple as: app = core.App() When you run , an initial application with basic boilerplate code is created for you in the project root, under . cdk init --language [language] app.py The next thing we need is an environment, which is composed of an AWS Account ID and Region: env = env = core.Environment(
    account= ,
    region= ,
) 1234567890 'us-east-1' Declaring an environment is not required (CDK can infer from your AWS credentials), but is a good practice. Most of us work with multiple AWS accounts. It’s easy to mess around with several projects, accounts, credentials. When we explicitly set the environment in the CDK app, it’s locked and prevents mistaken deployments. Now we declare our stacks: my_project.my_project_stack MyStack

my_stack = MyStack(
    app, ,
    env=env,
) from import 'my-stack' This is how we our stacks for deployment. In the next section we’ll see how to those stacks. instantiate declare Stack Object The Stack object is where we our AWS resources. It inherits from the core.Stack CDK class and accepts a scope - which is our app object - a string identifier and an environment. declare ( . ): ( , : . , : , : . ,
            ** ,
            ) -> : (). ( , , ** )

        # class MyStack core Stack def __init__ self scope core Construct id str env core Environment kwargs None super __init__ scope id kwargs Declare AWS resources here Declaring AWS resources To declare AWS resources, we need a specific library for each service. Here’s a list of all and their counterparts. Other flavors are and . Python libraries Typescript Java .NET Let’s see how a basic REST API would be declared (typing expressions were removed for readability purposes): aws_cdk aws_apigateway, aws_lambda = aws_lambda.Function(
            self, ,
            runtime=aws_lambda.Runtime.PYTHON_3_8,
            code=aws_lambda.Code.asset( my_lambda.handler sls-blog-rest-api-gateway from import ( . ): ( , , , ): (). ( , , ** ) class MyStack core Stack def __init__ self scope id env super __init__ scope id kwargs my_lambda 'MyLambda' 'my_lambda_folder),
            handler=' ',
        )

        aws_apigateway.LambdaRestApi(
            self,
            ' ',
            handler=my_lambda,
        ) We first declare a Lambda function . We point its code to the . Inside this folder, there should be a file, containing a function called . This handler function should accept Lambda invocations normally (an and objects). my_lambda my_lambda_folder my_lambda.py handler event context Next, a is declared, using as the handler (not to confuse with the Lambda’s handler function). This will create a new API Gateway REST API integrated with using an . All HTTP requests will be routed to the Lambda function. LambdaRestApi my_lambda my_lambda AWS_PROXY integration type Our Project App & Stacks comprises one application with three Stacks. They’re all declared in the and files. This project app.py sls_website_stack.py Below we’ll walk through all Stacks in a high level. I encourage you to inspect the to learn how these resources are declared and also integrated. For example: a Kinesis Firehose is created in one Stack and referenced in another to include its name as an environment variable for the Lambda function that will interact with it. stacks file Except for the frontend static Stack - which is small - you will notice that resources are initialized with a (null) value in the beginning. The reason is that, even though the CDK is generally more succinct than CloudFormation, it can still be lengthy enough to clutter the view of the entire Stack. Having each resource declared first in one line, I can provide a short summary of everything that’s in the Stack and then instantiate the CDK classes in other methods. None = static_stack

        # SQS Queues
        self.queue_ddb_streams_dlq = None  # Dead-letter-queue DDB streams

        # DynamoDB Tables
        self.ddb_table_blog = None  # Single-table all blog content

        # DynamoDB Event Sources
        self.ddb_source_blog = None  # Blog table streams source

        # DynamoDB Indexes
        self.ddb_gsi_latest = None  # GSI ordering articles by timestamp

        # Lambda Functions
        self.lambda_blog = None  # Serves requests to the blog public API
        self.lambda_stream_reader = None  # Processes DynamoDB streams

        # Continues other resources... ( . ): ( , , , , ): (). ( , , ** ) . class SlsBlogApiStack core Stack def __init__ self scope id env static_stack super __init__ scope id kwargs self static_stack for for with Notice it takes another Stack object ( ) as an argument to its initialization. In the file, you can see that the is initialized passing the as an argument. static_stack app.py SlsBlogApiStack SlsBlogStack We use it to reference the CloudFront distribution domain ( ) in the Lambda environment variables. This variable can be used to customize the HTTP response header to comply with . This illustrates one way to easily integrate and reference information from one Stack into another within a CDK project. d1qmte5oc6ndq5.cloudfront.net Access-Control-Allow-Origin CORS standards At the end of the initialization, another method is called to instantiate the CDK classes for each resource and configure their parameters. self.create_cdk_resources() Next we’ll walk through each of our project’s Stacks. Stack 1: static website Our focus is on the Serverless backend, so the frontend here is terribly rough and simple. It’s stored in an S3 Bucket and distributed through a CloudFront CDN. CDK has a helpful class called BucketDeployment. It takes the contents of a directory and sync to an S3 bucket. In this case, we stored the frontend code in the folder. website_static aws_s3_deployment.BucketDeployment(
    self, ,
    sources=[aws_s3_deployment.Source.asset( )],
    destination_bucket=static_bucket,
    distribution=cdn,
) 'SlsBlogStaticS3Deployment' 'website_static' Stack 2: API/backend Our backend consists of an API Gateway (REST) connected to a . Microservices receives a lot of press, but you probably shouldn’t always break your applications in several functions. A Monolith is just fine - -, really. monolithic Lambda function and sometimes recommended This API & Lambda support a single endpoint (with GET and POST methods) with a queryString “action”, which takes three parameters: : populates the latest blog posts get-latest-articles : triggered when someone likes an article like-article : post a new blog article publish-article Here’s the power of the CDK model. We can create a REST API with 10 lines of code: rest_api_blog = aws_apigateway.LambdaRestApi(
    self, ,
    handler=lambda_blog,  # Previously declared Lambda 'sls-blog-rest-api-gateway' = . ( ),
    ),
) function deploy_options aws_apigateway StageOptions stage_name= ,
        throttling_rate_limit=lambda_param_max_concurrency,
        logging_level=aws_apigateway.MethodLoggingLevel( 'api' 'INFO' One nice little thing is that Lambda memory is used as a cache for the latest articles. We load the cache container outside the Lambda handler function. It remains in memory even after an invocation ends and is available for subsequent requests. Learn more here about . how to use Lambda as a cache mechanism MAX_CACHE_AGE: int = # In seconds
CACHE_LATEST_ARTICLES: Dict[str, Union[int, list]] = { : time.time(), : [],
} 120 'last_update' 'articles' All the data is stored in DynamoDB (DDB) using a , in . The site only shows the latest blog articles and items get after a few days by setting a attribute. single-table design on-demand mode auto-deleted by DDB time-to-live ddb_attr_time_to_live = ddb_param_max_parallel_streams = ddb_table_blog = aws_dynamodb.Table(
    self, ,
    partition_key=aws_dynamodb.Attribute(
        name= ,
        type=aws_dynamodb.AttributeType.STRING,
    ),
    billing_mode=aws_dynamodb.BillingMode.PAY_PER_REQUEST,
    point_in_time_recovery=True,
    removal_policy=core.RemovalPolicy.DESTROY,
    time_to_live_attribute=self.ddb_attr_time_to_live,
    stream=aws_dynamodb.StreamViewType.NEW_AND_OLD_IMAGES,
) 'time-to-live' 5 'sls-blog-dynamo-table' 'id' The DDB table also has a that makes it easier to retrieve articles ordered by date for the site: GSI (Global Secondary Index) self.ddb_table_blog.add_global_secondary_index(
    index_name= ,
    partition_key=aws_dynamodb.Attribute(
        name= ,
        type=aws_dynamodb.AttributeType.STRING,
    ),
    sort_key=aws_dynamodb.Attribute(
        name= ,
        type=aws_dynamodb.AttributeType.NUMBER,
    ),
    projection_type=aws_dynamodb.ProjectionType.ALL,
) 'latest-blogs' 'item-type' 'publish-timestamp' Modifications to DDB items generate streams that are processed by a . These streams are then repackaged and sent to a Kinesis Firehose stream processor. second Lambda function DDB doesn’t provide the flexibility that SQL databases offer and many choose , for example. Although Aurora is a great service, personally I prefer DDB for its simplicity and reliable, consistent performance. But sometimes we do need to run analytical queries, those with aggregations and on-the-fly filters. For that, we’ll be using Athena (more in the next Stack). Aurora Serverless Stack 3: analytical querying A Kinesis Firehose Stream is responsible for batching data inserted/modified in DDB, converting them to Apache Parquet format and storing in dedicated S3 buckets. From S3, we create a Data Lake with AWS Glue (used to declare our data schemas) and Athena (used to query the data). Athena is extremely powerful. We can statements ( ) to query terabytes of data and pay on-demand ($0.005 per GB of data scanned). Using Parquet not only improves query speed, but also reduces cost by minimizing the amount of data Athena needs to scan for each query. use SQL SELECT with some limitations Queries that are impossible or expensive/slow in DynamoDB, such as aggregations and JOINs, are fast and cheap in Athena. The two services combine each other in a perfect way, so that your application has optimized transactional storage and flexible analytical querying capabilities. We can use Athena to query all articles ever published and cross-reference with likes and HTTP metadata (source IP address, country, device type, etc). Even articles that were already expired by DynamoDB TTL (time-to-live) would continue to be available in the Data Lake. For example, which countries are liking the most articles? In the AWS Console, we get something like this: Queries can also be executed programmatically with or (e.g. ) to integrate anywhere we need this data. Athena API AWS SDKs Python’s boto3 Athena also supports JOINs. Here’s an example joining articles and HTTP metadata to analyze the most popular authors among readers of a particular country: Deployment CDK can deploy one Stack at a time. Since we have three, it’s necessary to specify which one when running the command. We do that by passing in the Stack ID as a CLI argument. For example, the following command will deploy the SlsBlogApiStack (id: ): CDK deploy sls-blog-api cdk deploy sls-blog-api Since all Stacks involve some type of permission granting, CDK asks for confirmation before deploying those resources. You can review the permissions requested and hit y when it’s good to go. Wrapping up We’ve covered how to structure CDK apps and add a bunch of AWS Resources to deploy with a simple command. CDK deploy If you’re new to the CDK - and as suggested early in the article -, it’s strongly recommended to follow AWS and . CDK workshop documentation Keep an eye on future publications as well, as is releasing other examples and tutorials to reap the most out of AWS serverless services with the power of infra automation with CDK or else. Dashbird Previously published at https://dashbird.io/blog/crash-course-aws-cdk-serverless-rest-api-data-lake-analytical-querying/

Stories, News & Mentions about CTRLSTACK

Ctrlstack’s Stories on HackerNoon