Stories by Vivek JM on Medium

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://vivekjm77.medium.com/personal-finance-ai-agent-in-few-simple-steps-with-langchain-081a78474755?source=rss-1e9f3e8d2fad------2"><img src="https://cdn-images-1.medium.com/max/2496/1*bVFzY6q0XC93n37iSWsVyA.png" width="2496"></a></p>
<p class="medium-feed-snippet">In today’s fast-paced digital world, managing personal finances efficiently is more important than ever. From budgeting to investing…</p>
<p class="medium-feed-link"><a href="https://vivekjm77.medium.com/personal-finance-ai-agent-in-few-simple-steps-with-langchain-081a78474755?source=rss-1e9f3e8d2fad------2">Continue reading on Medium »</a></p>
</div>

Personal Finance AI Agent in Few Simple Steps with LangChain

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://vivekjm77.medium.com/the-year-in-computer-science-breakthroughs-of-2024-and-what-lies-ahead-dcac411fc083?source=rss-1e9f3e8d2fad------2"><img src="https://cdn-images-1.medium.com/max/1920/1*_lQp-EPEbInYwn_yVACXRA.png" width="1920"></a></p>
<p class="medium-feed-snippet">2024 wasn’t just a year — it was a revelation. It will go down in history as the year technology leapt forward, leaving behind whispers of…</p>
<p class="medium-feed-link"><a href="https://vivekjm77.medium.com/the-year-in-computer-science-breakthroughs-of-2024-and-what-lies-ahead-dcac411fc083?source=rss-1e9f3e8d2fad------2">Continue reading on Medium »</a></p>
</div>

The Year in Computer Science: Breakthroughs of 2024 and What Lies Ahead


<h3>Day 1: Building the Foundation — JavaScript Fundamentals</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*uU96JuQkoYH5T_jfirXlzQ.png"></figure><p>Welcome to the first day of our journey to becoming JavaScript interview-ready! Before we dive into advanced topics, it’s essential to build a strong foundation. Today, we’ll cover the core basics that every JavaScript developer must know, complete with examples and tricky questions that might come up during interviews.</p>
<h3>1. Variables and Data Types</h3>
<p>JavaScript variables are the building blocks of any program. Understanding how to declare and use them is crucial.</p>
<h4>Variable Declaration</h4>
<p>JavaScript provides three ways to declare variables:</p>
<ul>
<li>var (function-scoped, hoisted)</li>
<li>let (block-scoped, not hoisted)</li>
<li>const (block-scoped, immutable for primitive values)</li>
</ul>
<h4>Example</h4>
<pre>var x = 10; // Function-scoped<br>let y = 20; // Block-scoped<br>const z = 30; // Immutable<br><br>if (true) {<br>    var x = 40; // Reassigns globally<br>    let y = 50; // Scoped to this block<br>    console.log(y); // 50<br>}<br>console.log(x); // 40<br>// console.log(y); // ReferenceError</pre>
<h4>Question</h4>
<p><strong>Q:</strong> What will this code output, and why?</p>
<pre>console.log(a);<br>var a = 10;<br>let b = 20;<br>console.log(b);</pre>
<ul>
<li>console.log(a); outputs undefined because var is hoisted, but its value is not initialised.</li>
<li>console.log(b); throws a ReferenceError because let is not accessible before initialisation (Temporal Dead Zone).</li>
</ul>
<h4>Interview Tip</h4>
<p>Always clarify the differences between var, let, and const during interviews. Highlight the scope and hoisting behavior.</p>
<h3>2. Data Types and Type Coercion</h3>
<p>JavaScript has dynamic typing, which means variables can hold values of any type. Understanding type coercion and type checking is crucial for avoiding bugs.</p>
<h4>Data Types</h4>
<ul>
<li>
<strong>Primitive Types</strong>: string, number, boolean, null, undefined, bigint, symbol</li>
<li>
<strong>Non-Primitive Types</strong>: Objects, Arrays, Functions</li>
</ul>
<p>Example</p>
<pre>const a = 42; // Number<br>const b = "42"; // String</pre>
<pre>console.log(a == b);  // true (type coercion)<br>console.log(a === b); // false (strict equality)</pre>
<h4>Question</h4>
<p>What is the output of this code?</p>
<pre>console.log(0 == false);<br>console.log(0 === false);<br>console.log(null == undefined);<br>console.log(null === undefined);</pre>
<ul>
<li>0 == false: true (type coercion)</li>
<li>0 === false: false (strict comparison)</li>
<li>null == undefined: true (loose equality treats them as equal)</li>
<li>null === undefined: false (strict comparison checks type)</li>
</ul>
<h4>Interview Tip</h4>
<p>Practice explaining the difference between loose (==) and strict equality (===). Show you understand implicit type conversions.</p>
<h3>3. Functions and Scope</h3>
<p>Functions are the core of JavaScript. Understanding how scope and closures work is vital for solving complex problems.</p>
<h4>Example</h4>
<pre>function outer() {<br>    let count = 0;<br>return function inner() {<br>        count++;<br>        console.log(count);<br>    };<br>}<br>const increment = outer();<br>increment(); // 1<br>increment(); // 2</pre>
<h4>Question</h4>
<p>Explain closures and why the following code behaves as it does:</p>
<pre>function createFunctions() {<br>    const arr = [];<br><br>for (let i = 0; i &lt; 3; i++) {<br>        arr.push(() =&gt; i);<br>    }<br>    return arr;<br>}<br>const functions = createFunctions();<br>console.log(functions[0]()); // ?<br>console.log(functions[1]()); // ?<br>console.log(functions[2]()); // ?</pre>
<ul>
<li>The output is 0, 1, 2 because let creates a new block scope for each iteration, so the closures capture distinct values of i.</li>
<li>If var were used, the output would be 3, 3, 3 because var is function-scoped and i would reference the same variable.</li>
</ul>
<blockquote>Interview Tip</blockquote>
<p>Be ready to demonstrate how closures work with examples. Understand scope differences between let, const, and var.</p>
<h3>4. Control Flow and Error Handling</h3>
<p>Control flow statements like if, switch, and loops are foundational, as is error handling using try-catch.</p>
<h4>Example</h4>
<pre>function divide(a, b) {<br>    try {<br>        if (b === 0) {<br>            throw new Error("Cannot divide by zero");<br>        }<br>        return a / b;<br>    } catch (error) {<br>        console.error(error.message);<br>    }<br>}</pre>
<pre>divide(4, 2); // 2<br>divide(4, 0); // "Cannot divide by zero"</pre>
<h4>Question</h4>
<p>How does the finally block behave in try-catch-finally?</p>
<pre>try {<br>    console.log("Try block");<br>    throw new Error("An error occurred");<br>} catch (error) {<br>    console.log("Catch block");<br>} finally {<br>    console.log("Finally block");<br>}</pre>
<p>The finally block executes regardless of whether an error is thrown or not. Output:</p>
<pre>Try block<br>Catch block<br>Finally block</pre>
<h4>Interview Tip</h4>
<p>Show you understand error handling best practices and the significance of finally for cleanup tasks.</p>
<h3>5. Tricky Problems for Practice</h3>
<p>Here are a couple of tricky problems to challenge yourself:</p>
<p>Problem 1: FizzBuzz</p>
<p>Write a function that prints numbers from 1 to 100. For multiples of 3, print “Fizz”; for multiples of 5, print “Buzz”; and for multiples of both, print “FizzBuzz”.</p>
<p>Problem 2: Reverse a String</p>
<p>Write a function that reverses a string without using built-in methods.</p>
<pre>function reverseString(str) {<br>    let reversed = "";<br>    for (let i = str.length - 1; i &gt;= 0; i--) {<br>        reversed += str[i];<br>    }<br>    return reversed;<br>}</pre>
<pre>console.log(reverseString("hello")); // "olleh"</pre>
<h4>Next Steps</h4>
<p>That’s it for Day 1! We’ve covered the essential building blocks of JavaScript. These fundamentals will form the backbone of everything we learn in this series. Make sure to practice the examples and tricky questions, as they’re designed to test your understanding.</p>
<p>In the next post, we’ll dive deeper into functions, exploring advanced concepts like higher-order functions, callbacks, and recursion. Stay tuned, and let’s keep building together!</p>
<p>Feel free to connect with me on <a href="https://www.linkedin.com/in/vivek-jm/">LinkedIn</a> or <a href="https://x.com/vivek_j_m">X</a> if you have any questions or need help. Let’s ace those interviews!</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=6afb9f580699" width="1" height="1" alt="">


Day 1: Building the Foundation — JavaScript Fundamentals


<h3>Part 1: From Zero to JavaScript Interview Ready — A Journey Begins</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*uU96JuQkoYH5T_jfirXlzQ.png"></figure><p>Hello, world! I’m Vivek JM, a seasoned JavaScript and TypeScript engineer with over six years of hands-on experience in building scalable applications and solving real-world problems. Through the years, I’ve learned a lot, stumbled plenty, and grown exponentially — not just as a developer but also as someone who loves mentoring and sharing knowledge through writing.</p>
<p>Today, I’m thrilled to announce a new series that I’ll be writing on Medium: <strong>“From Zero to JavaScript Interview Ready.”</strong> This is not just another tutorial series; it’s a journey designed for anyone — whether you’re a complete beginner or an experienced developer looking to sharpen your skills. We’ll start from the very basics of JavaScript and progress step by step to advanced concepts, tackling everything you need to ace JavaScript interviews.</p>
<p>But before we dive into the roadmap, here’s a little bit about me: You can connect with me on <a href="https://www.linkedin.com/in/vivek-jm/">LinkedIn</a> and <a href="https://x.com/vivek_j_m">X</a>. I’m deeply passionate about mentoring and helping others navigate the ever-evolving world of technology. If you ever have questions or need guidance, I’m just a message away.</p>
<h3>Why This Series?</h3>
<p>Over the years, I’ve noticed that preparing for JavaScript interviews can feel overwhelming. From brushing up on the fundamentals to mastering advanced concepts, the path to readiness often seems scattered and daunting. My goal with this series is to:</p>
<ul>
<li>Provide a <strong>structured roadmap</strong> that’s easy to follow.</li>
<li>Share <strong>insights and tricks</strong> from my own experience as both an interviewee and interviewer.</li>
<li>Empower anyone — regardless of their starting point — to embark on this journey and emerge confident and prepared.</li>
</ul>
<h3>How to Use This Series</h3>
<p>To make the most out of this series:</p>
<ol>
<li>
<strong>Commit to Consistency</strong>: Set aside a dedicated time each week to follow along.</li>
<li>
<strong>Engage Actively</strong>: Practice the examples, solve the problems, and ask questions.</li>
<li>
<strong>Track Your Progress</strong>: Use the roadmap to see where you stand and what’s next.</li>
</ol>
<p>This series is designed to be interactive and progressive. Whether you’re starting from scratch or brushing up on advanced topics, you’ll find something valuable here.</p>
<h3>What to Expect</h3>
<p>Here’s a detailed roadmap for this series:</p>
<h4>1. Introduction to the Journey</h4>
<p>– A detailed overview of what’s to come and how to make the most of it.</p>
<h4>2. The Fundamentals of JavaScript</h4>
<p>– Covering variables, data types, operators, conditionals, and loops to build a strong base.</p>
<h4>3. Diving into Functions</h4>
<p>– Exploring everything about functions, including parameters, scope, closures, and higher-order functions.</p>
<h4>4. Objects and Arrays in Depth</h4>
<p>– Understanding object manipulation, array methods, immutability, and destructuring.</p>
<h4>5. Mastering Asynchronous JavaScript</h4>
<p>– Tackling callbacks, promises, async/await, and the JavaScript event loop.</p>
<h4>6. Data Structures and Algorithms in JavaScript</h4>
<p>– Implementing arrays, linked lists, hash tables, stacks, queues, trees, and graphs with JavaScript.</p>
<h4>7. Advanced JavaScript Concepts</h4>
<p>– Covering prototypes, inheritance, this binding, modules, and ES6+ features.</p>
<h4>8. TypeScript for Interviews</h4>
<p>– Exploring TypeScript’s role in improving code quality and handling real-world scenarios.</p>
<h4>9. System Design for JavaScript Engineers</h4>
<p>– Learning to design scalable APIs, front-end architectures, and full-stack systems using JavaScript.</p>
<h4>10. Mock Interview and Practice Problems</h4>
<p>– Simulating interview scenarios with real-world problems and solutions.</p>
<h3>Who Is This For?</h3>
<p>This series is for everyone:</p>
<ul>
<li>
<strong>Beginners</strong>: If you’re new to JavaScript, this is your chance to build a strong foundation.</li>
<li>
<strong>Intermediate Developers</strong>: If you want to refine your skills and tackle challenging interview problems, this is the right place.</li>
<li>
<strong>Experienced Engineers</strong>: If you’re preparing for a big opportunity and need a refresher, you’ll find practical insights and resources here.</li>
</ul>
<h3>Key Highlights of the Series</h3>
<ul>
<li>
<strong>Interactive Code Examples</strong>: Each post will include hands-on examples to ensure you can apply what you learn.</li>
<li>
<strong>Practical Insights</strong>: Tips and tricks to approach tricky interview questions.</li>
<li>
<strong>Regular Updates</strong>: Consistent posts to help you maintain momentum.</li>
<li>
<strong>Community Engagement</strong>: Opportunities to ask questions, share progress, and connect with others on the same journey.</li>
</ul>
<h3>Call to Action</h3>
<p>If you’re ready to embark on this journey, follow me here on Medium and connect with me on <a href="https://www.linkedin.com/in/vivek-jm/">LinkedIn</a> and <a href="https://x.com/vivek_j_m">X</a>. Let’s make this a two-way conversation. Have a question? Stuck on a concept? Need tips for your next interview? Drop me a message or comment on the posts. I’m here to help.</p>
<p>This series is my way of giving back to the community that’s given me so much. Let’s learn, grow, and succeed together. Stay tuned for the next post where we’ll dive into the fundamentals of JavaScript and lay the groundwork for everything that’s to come.</p>
<p>See you in the next blog!</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2ade307457e8" width="1" height="1" alt="">


Part 1: From Zero to JavaScript Interview Ready — A Journey Begins

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://vivekjm77.medium.com/the-curious-case-of-alignment-faking-in-large-language-models-0f68fef3f557?source=rss-1e9f3e8d2fad------2"><img src="https://cdn-images-1.medium.com/max/1920/1*_fXdHtwLfPWxe3iMSX31cw.png" width="1920"></a></p>
<p class="medium-feed-snippet">We often encounter instances where individuals or entities exhibit behavior that appears to align with our expectations or goals but, in…</p>
<p class="medium-feed-link"><a href="https://vivekjm77.medium.com/the-curious-case-of-alignment-faking-in-large-language-models-0f68fef3f557?source=rss-1e9f3e8d2fad------2">Continue reading on Medium »</a></p>
</div>

The Curious Case of Alignment Faking in Large Language Models

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://vivekjm77.medium.com/the-accidental-birth-of-aws-the-billion-dollar-pivot-that-changed-tech-forever-2a29ff817954?source=rss-1e9f3e8d2fad------2"><img src="https://cdn-images-1.medium.com/max/1920/1*b1ib6saxFi_bdnHMNBhxDQ.png" width="1920"></a></p>
<p class="medium-feed-snippet">Once upon a time, in the early 2000s, Amazon was an online bookstore-turned-everything store. Its operations were growing exponentially…</p>
<p class="medium-feed-link"><a href="https://vivekjm77.medium.com/the-accidental-birth-of-aws-the-billion-dollar-pivot-that-changed-tech-forever-2a29ff817954?source=rss-1e9f3e8d2fad------2">Continue reading on Medium »</a></p>
</div>

The Accidental Birth of AWS: The Billion-Dollar Pivot That Changed Tech Forever

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://vivekjm77.medium.com/run-llama-3-2-offline-in-react-native-with-just-a-few-lines-of-code-cabeaec6dd07?source=rss-1e9f3e8d2fad------2"><img src="https://cdn-images-1.medium.com/max/1920/1*hDI7uIwBpR4qUblflVLTMg.png" width="1920"></a></p>
<p class="medium-feed-snippet">Imagine running advanced AI models like LLaMA 3.2 completely offline within your React Native app — no internet needed, no cloud…</p>
<p class="medium-feed-link"><a href="https://vivekjm77.medium.com/run-llama-3-2-offline-in-react-native-with-just-a-few-lines-of-code-cabeaec6dd07?source=rss-1e9f3e8d2fad------2">Continue reading on Medium »</a></p>
</div>

Run LLaMA 3.2 Offline in React Native with Just a Few Lines of Code!

<div class="medium-feed-item">
<p class="medium-feed-image"><a href="https://vivekjm77.medium.com/beyond-hype-unveiling-the-real-future-of-mobile-apps-227a1b8682d5?source=rss-1e9f3e8d2fad------2"><img src="https://cdn-images-1.medium.com/max/1640/1*1nlAV1CDQ5aTV488gFUdwA.jpeg" width="1640"></a></p>
<p class="medium-feed-snippet">Mobile apps are no longer a futuristic vision; they’re deeply woven into our daily routines, from ordering groceries with a few taps to…</p>
<p class="medium-feed-link"><a href="https://vivekjm77.medium.com/beyond-hype-unveiling-the-real-future-of-mobile-apps-227a1b8682d5?source=rss-1e9f3e8d2fad------2">Continue reading on Medium »</a></p>
</div>

Beyond Hype: Unveiling the Real Future of Mobile Apps


<p>The surge in mobile app popularity is fuelled by shifting user preferences and the demand for convenient interactions. App installs have increased by 31% annually, with user engagement rising by 4.5%. The Apple App Store boasts 2.22 million apps, while Google Play features 3.48 million. Consumers, embracing 5G and post-pandemic behaviours, seek convenience in shopping, delivery, gaming, and fitness apps.</p>
<p>Businesses, both B2B and B2C, prfioritize mobile interactions to meet evolving consumer expectations. Seamless mobile experiences are crucial as organisations adapt to changing behaviours. In 2024, understanding mobile app architecture is paramount for capitalising on the mobile revolution’s opportunities.</p>
<h3><strong>Mobile Application Architecture ? Lets dive deep !</strong></h3>
<p>Mobile app architecture encompasses a structured framework of rules, techniques, processes, and patterns essential for the development of mobile applications. These guidelines empower developers to craft apps that align with business objectives while adhering to industry standards.</p>
<p><strong>Mobile App Architecture vs. Mobile Tech Stack: What’s the Difference?</strong></p>
<p>Mobile app architecture is often mistakenly equated with the mobile tech stack. However, this comparison overlooks the nuanced differences between the two. While the mobile technology stack pertains to the assortment of technologies and technical frameworks constituting the front and back-end of a mobile or web app (dealing with the functionality and structure of the app), it places less emphasis on the business or customer requirements (the rationale behind the app) and the development process (the methodologies employed in creating the app).</p>
<p>Conversely, mobile app architecture encompasses a broader spectrum of considerations, encompassing the purpose, content, and technical implementation of the app. It encompasses aspects such as data collection, data flow, app design, target platforms, and the chosen tech stack, serving as the blueprint for the app’s development and functionality.</p>
<p><strong>Characteristics of a Strong Mobile App Architecture</strong></p>
<p>Developing mobile apps without adhering to architecture standards can lead to:</p>
<p>1. Increased development time and costs.<br>2. Maintenance difficulties, especially with staff turnover.<br>3. Limited scalability and expansion potential.<br>4. Challenges in testing and higher error rates.</p>
<p>A robust mobile app architecture integrates essential software development principles like KISS, DRY, and SOLID. It:</p>
<p>1. Streamlines development processes.<br>2. Facilitates clear data flow.<br>3. Supports future scalability and expansion.<br>4. Promotes flexibility and aligns with Agile development practices.<br>5. Enhances testing efficiency and simplifies future maintenance.<br>6. Reduces the risk of bugs.<br>7. Should be platform-agnostic, catering to both native and cross-platform development approaches for a unified strategy.</p>
<p>Thinking of mobile app architecture as a skeleton, it provides the framework for building essential components, ensuring consistency and coherence throughout the app development process.</p>
<h3>Layers in Mobile App Architecture</h3>
<p>Mobile app architecture is categorised by 3 layers: presentation, business logic, and data.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gG_7zAoyyUJlrQBcerAL8A.png"></figure><p><strong>1)Presentation Layer</strong><br>The presentation layer encompasses all processes and components responsible for delivering the app to the user. Developers focus on what users see and experience when interacting with the app. This layer consists of the User Interface (UI) and User Experience (UX).</p>
<p><strong>UI involves</strong> design elements such as colors, fonts, placement, and overall aesthetic.<br><strong>UX involves</strong> managing how users interact with the app based on their needs and emotions.</p>
<p>When designing the presentation layer, developers must choose the appropriate platform and device type to ensure consistency with each platform’s standards.</p>
<p><strong>2)Business Layer<br></strong>The business layer handles the logic and rules governing data exchange, operations, and workflow regulation. Its responsibilities include:</p>
<p>1. Ensuring security<br>2. Implementing data caching<br>3. Managing logging<br>4. Performing data validation<br>5. Handling exception management</p>
<p>The placement of the business layer can vary, residing either on the server or the user device, depending on the app’s operations and resource requirements.</p>
<p><strong>3)Data Layer</strong></p>
<p>The data layer encompasses data utilities, service agents, and data access components essential for facilitating data transactions. It can be divided into two components:</p>
<p>1. Persistence: Facilitating data access with data sources via APIs.<br>2. Network: Handling network communication, routing, and error reporting.</p>
<p>The design of the data layer should consider validation and maintenance of the data to ensure its accuracy and integrity.</p>
<h3>Android Mobile Application Architecture</h3>
<p>Android apps, which are designed specifically for the Android platform, represent a type of native app tailored to a particular mobile operating system. These apps are developed to support languages such as Kotlin and Java, catering to devices manufactured by various companies like Google, Samsung, Sony, and Nokia. Although there isn’t a single prescribed architecture for Android apps, Clean Architecture is widely embraced within the Android development community.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*M57XwCwZvxwtOV9V0Yk94Q.png"><figcaption>Clean Architecture</figcaption></figure><p>Clean Architecture is structured around the principles of layers and inversion of control. It adopts a three-layered structure, with the business layer often referred to as the domain layer. In Clean Architecture, it’s crucial that the domain or business layer remains independent of the other layers and instead relies on interfaces. While this concept may pose challenges in comprehension, it greatly facilitates the scalability and extensibility of apps over time.</p>
<h3>iOS Mobile Application Architecture</h3>
<p>Native iOS apps are built using Objective-C and Swift programming languages, with Apple advocating clear best practices for app architecture through the Model-View-Controller (MVC) model. The MVC model comprises:</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Aso7s2Mh5wM8AIr37zo1Yg.png"><figcaption>MVC architecture</figcaption></figure><p>1. Model: This represents the data layer, including components such as persistence, model objects, parsers, managers, and networking code.<br>2. View: Similar to the presentation layer, the view is a reusable component that presents the app’s interface to the user.<br>3. Controller: Acting as a mediator, the controller communicates with an abstraction through a protocol.</p>
<p>The MVC model facilitates rapid and parallel development and offers the flexibility to create multiple views, making it an excellent choice for mobile development on the iOS platform.</p>
<h3>Hybrid Mobile Application Architecture</h3>
<p>Hybrid mobile applications combine the strengths of both native and web technologies. They utilize native frameworks for backend functionalities while employing platform-independent JavaScript, HTML, and CSS for the frontend. To access native platform features, hybrid apps integrate plugins like Apache Cordova or Ionic Capacitor.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-ssyMjEX_QpnI73GKbnGIg.png"><figcaption>Hybrid Architecture</figcaption></figure><p>Hybrid mobile apps offer rapid development and easy updates across multiple platforms. However, they may not be suitable for intricate or highly interactive applications due to their inherent limitations.</p>
<p><strong>Cross platform apps benefits</strong></p>
<p>Cross-platform development, similar to hybrid architecture, utilizes a shared codebase with platform-specific functionalities within native shells. Instead of web languages, cross-platform apps employ frameworks like React Native and Xamarin. They aim to provide a user experience closer to native apps, which often enhances their appeal.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*G8gKxEoGdB_-nCPide2Ocw.png"><figcaption>Cross platform benefits</figcaption></figure><h4>Factors to Consider When Developing Mobile App Architecture?</h4>
<p><strong>1. Device Considerations</strong><br>When embarking on mobile app design, the primary step involves selecting the platform (iOS, iPadOS, Android, Windows, Cross-platform) and understanding the diverse range of smartphone models in use. Key factors such as screen size, DPI, resolution, CPU, and RAM must be taken into account to determine optimal development dimensions. The aim is to ensure a consistent user experience across various platforms and device types (e.g., tablets vs. mobiles, different model variations).</p>
<p><strong>2. Development Frameworks</strong><br>In crafting mobile app architecture and establishing the tech stack, the choice of developmental frameworks is crucial. These frameworks offer libraries, templates, and components for both front-end and back-end development. Front-end options include Bootstrap, Foundation, React, Angular, Vue, and Backbone, while back-end frameworks vary based on programming language and target platforms such as Ruby on Rails, Flask, Django, Laravel, Swift, Xamarin, React Native, and Flutter, among others.</p>
<p><strong>3. Bandwidth Considerations</strong><br>Understanding user research insights is paramount, especially considering the varying bandwidth scenarios worldwide. From countries with advanced 5G networks to those with intermittent connectivity, it’s vital to tailor app features accordingly. For instance, highly interactive or graphic-heavy apps may not suit users in rural areas with limited bandwidth.</p>
<p><strong>4. User Interface/User Experience (UI/UX) Design</strong><br>UI/UX design significantly influences initial impressions and user retention in mobile app architecture. A robust UX design aligns with evolving user expectations and OS/device-specific best practices. Balancing UI aesthetics with UX functionality is crucial, emphasizing the importance of staying informed about mobile UX design basics and emerging trends for 2024.</p>
<p><strong>5. Navigation Strategies</strong><br>Navigation serves as the primary point of interaction between users and the design, influencing both front-end and back-end elements. A well-designed mobile UX enables users to easily navigate pages and explore different sections. Familiarity is key in navigation, and employing the following best practices can enhance user experience and reduce friction in the customer journey:</p>
<p><strong>1. Hamburger Menu:</strong> Utilize the three-line menu in the navigation drawer or top bar, a popular choice due to its familiarity. Enhance navigation further with hover-over menus to reduce clicks.</p>
<p><strong>2. Search Bar</strong>: Position the search bar effectively, typically at the top right, to improve usability and accessibility.</p>
<p><strong>3. Navigation Options:</strong> Explore various navigation structures such as fixed bars of buttons (top and/or bottom), vertical rails, hidden drawers, and fixed tabs with titles for streamlined navigation.</p>
<p><strong>4. Familiar Icons:</strong> Incorporate recognizable icons like home, search, photos, and folders to facilitate navigation and improve user understanding.</p>
<p><strong>5. Intuitive Labeling:</strong> Clearly label buttons, options, and features to provide users with clear intent and guidance.</p>
<p><strong>6. Site Organization:</strong> Organize content logically to simplify navigation, adhering to information architecture best practices for enhanced user experience.</p>
<p><strong>7. Gesture Support: </strong>Implement gesture-based navigation, such as swiping, to streamline user interactions and navigation within the app.</p>
<p><strong>8. Scrolling Behavior:</strong> Ensure smooth scrolling and consider how the app supports scroll versus fixed elements to optimize user experience.</p>
<p><strong>9. Thumb Zone Navigation:</strong> Design with the thumb zone in mind to improve usability, considering the natural reach of users’ thumbs for comfortable navigation.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*n9ig_NqYWqyx74c1PgwfiA.png"></figure><p><strong>5. Push Notifications vs Real-time Updates</strong></p>
<p>Balancing user engagement and annoyance is crucial when considering notification frequency and method, as it also impacts device battery life and, consequently, user retention.</p>
<p>Mobile push notifications serve as messages that apps send to inform users about new in-app content or messages, whether from the app itself (e.g., product updates, offers, reminders) or other users. While Android users are automatically opted in for push notifications, iOS users must opt-in, typically at a lower rate (51% iOS vs. 81% Android).</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cYI9p-bKBCQ-VJWZMm0txg.png"></figure><p>Although some may find them bothersome, push notifications can effectively serve as a marketing tool, especially when personalized or conveying urgency.</p>
<p>In addition to scheduled push notifications, mobile apps are increasingly integrating real-time technologies for enhanced interactivity. For instance, a delivery app can utilize real-time updates to inform users about order status, tracked on a live map from acceptance to delivery. Similarly, health and fitness apps or home technologies benefit from real-time alerts, such as security system notifications. However, it’s essential to use real-time updates judiciously to prevent overwhelming users with notifications.</p>
<h3>How to Choose the Right Mobile App Architecture?</h3>
<p>Considerations for Finalizing Mobile Product Design Architecture:</p>
<p><strong>1. Budget:</strong> The selection of architecture is influenced by factors such as developer expertise, market analysis, and development methodology. However, the demand for rapid development often exceeds the availability of skilled IT professionals, potentially rendering an app obsolete before its market debut.</p>
<p><strong>2. Audience Analysis:</strong> Understanding user demographics, personas, and needs is essential. Conduct competitive analysis, develop agile user stories, map user flows, create wireframes, and conduct prototype testing to refine the design.</p>
<p><strong>3. Key Feature Requirements:</strong> Align business requirements with feature lists to determine the most suitable development approach — Native, Hybrid, or Cross-Platform.</p>
<p><strong>4. Platform Selection:</strong> Tailor UI and UX design practices to the specific platform, considering the unique characteristics of each.</p>
<p><strong>5. Development Time: </strong>Certain architectures may require more time for specific elements or integrations. Factor development timelines into the overall plan and decision-making process.</p>
<p><strong>6. Initiate Test App Development:</strong> Adopt an agile development approach, emphasizing iterative development and continuous feedback. Develop a basic test app with essential functionality and navigation to gather valuable user insights and ensure the architecture meets user expectations.</p>
<h3>Conclusion</h3>
<p>In the realm of mobile app development, crafting a robust design architecture is paramount for success. It involves careful consideration of factors like budget, audience analysis, key features, platform selection, and development time. By prioritizing user-centricity and embracing iterative refinement through the development of test apps, we ensure that our architectural choices resonate with user needs and expectations, paving the way for innovative and impactful mobile experiences.</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9645da914b06" width="1" height="1" alt="">


Navigating the Depths of Mobile Architecture: A Comprehensive Guide


<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yYijQwVU2aB8ftp2kxpdpg.png"></figure><p>Animations play an important role in mobile apps by giving <strong>life into the process of interaction </strong>and are especially good for mobile apps that have to be developed with limited screen estate, while providing an informative and functional interface.</p>
<p>Commonly used method in building interactive animations in react native is by using Animated api,that covers our most of the animation use cases and scenarios such as duration-based animation or spring or decay animation and APIs for canceling animation or repeat and interpolation</p>
<p>Problem arises while using the core animated api is that animated Api uses the JS thread for the calculating the animated values and if the js thread is busy running a complex business logic then the frame drops can occur at massive rate that destroys the overall animation experience and interactions</p>
<h3><strong>Why Reanimated ?</strong></h3>
<p>Reanimated saves us from the frame drop hell in react native,reanimated solves this very problem, by allowing us to run animation natively on the UI thread and thus eliminating any kind of delays.</p>
<p>Version 2 of the package, or what came to be known as reanimated 2 in the community, provides us with a set of useful hooks and functions allowing us to write cleaner code, less boilerplate and using plain JavaScript instead of the library’s own functions compared to the first version.</p>
<p>More details about working of the package can be found in <a href="https://docs.swmansion.com/react-native-reanimated/docs#motivation">official doc</a></p>
<h4>Lets dive deep into key concepts of reanimated 2</h4>
<p>In part 1 of the article we will be looking at the important hooks that came along with the version 2 of reanimated and in the end we will be building a simple animation using the learned concepts</p>
<ol><li><strong>Worklets</strong></li></ol>
<p>Worklets are simple javascript functions that run completely on UI thread,The only thing that is needed is for that function to have “worklet” directive at the top.. Each worklet function can be run either on the main React Native thread if you just call that function in your code, or you can execute it on the UI thread using runOnUI</p>
<pre>function someWorklet(greeting) {<br>  'worklet';<br>  console.log(greeting, 'From the UI thread');<br>}</pre>
<pre>function onPress() {<br>  runOnUI(someWorklet)('Howdy');<br>}</pre>
<p><strong>2. Shared Values</strong></p>
<p>Shared Values are among fundamental concepts behind Reanimated 2.0, similar to that of Animated.values from react natives animated Api.They serve a similar purpose of carrying “animateable” data, providing a notion of reactiveness, and driving animations.In order to create a Shared Value reference, you should use useSharedValue hook.</p>
<pre>import Animated, {<br>  useSharedValue,<br>  useAnimatedScrollHandler,<br>} from 'react-native-reanimated';</pre>
<pre>function SomeComponent({ children }) {<br>  const scrollOffset = useSharedValue(0);</pre>
<pre>const scrollHandler = useAnimatedScrollHandler({<br>    onScroll: (event) =&gt; {<br>      scrollOffset.value = event.contentOffset.y;<br>    },<br>  });</pre>
<pre>return (<br>    &lt;Animated.ScrollView onScroll={scrollHandler}&gt;<br>      {children}<br>    &lt;/Animated.ScrollView&gt;<br>  );<br>}</pre>
<p>From the example given above from the official docs we can see that ,the scroll handler is a worklet and runs the scroll event logic on the UI thread. and the Updates made in that worklets are synchronous.</p>
<p><strong>3. useAnimatedStyle</strong></p>
<p>Allows us to create an association between shared values and View properties,arguments for the hooks are updater(function)and dependencies(array) that returns Animated style — in order to connect the animated style hook result, you need to pass it as one of the style properties to the Animated version of the component (e.g. Animated.View).</p>
<pre>const App = () =&gt; {<br>  const [state, setState] = useState(0);<br>  const sv = useSharedValue(state);</pre>
<pre>const style = useAnimatedStyle(() =&gt; {<br>    return {<br>      width: sv.value,<br>    };<br>  }, dependencies);<br>  //...<br>  return &lt;&gt;&lt;/&gt;;<br>};</pre>
<p><strong>4. useDerivedValue</strong></p>
<p>Allows us for creating shared value reference that can change in response to updating of one or more other shared values.arguments for the hooks are updater(function)and dependencies(array) that returns a reference to a shared value initialized with the provided data. The reference is an object with .value property, that can be accessed and modified from worklets, but also updated directly from the main JS thread.</p>
<pre>import { Button } from 'react-native';<br>import { useSharedValue, useDerivedValue } from 'react-native-reanimated';</pre>
<pre>function App() {<br>  const progress = useSharedValue(0);<br>  const width = useDerivedValue(() =&gt; {<br>    return progress.value * 250;<br>  });</pre>
<pre>return (<br>    &lt;View&gt;<br>      &lt;SomeComponent width={width} /&gt;<br>      &lt;Button onPress={() =&gt; (progress.value = Math.random())} /&gt;<br>    &lt;/View&gt;<br>  );<br>}</pre>
<p>Now lets implement a simple reanimated animation using the learned concepts</p>
<a href="https://medium.com/media/42aea96b7ea4d9a7a2b4815ad9131c29/href">https://medium.com/media/42aea96b7ea4d9a7a2b4815ad9131c29/href</a><p>In the above example we used withRepeat hook to repeat an animation several time and which then changes the style of the view using the animated style hook that returns a new style object for new values and then we used a worklet to calculate the shape for the transformed object that runs completely on the UI thread that results the animation given below</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/300/1*H6TspJWbKBZg8cfs7p39Qw.gif"><figcaption>Example for worklet animation</figcaption></figure><h3>Conclusion</h3>
<p>That’s pretty much everything about the basics of the reanimated from my perspective and i will keep exploring on this awesome library done by softwaremansion</p>
<p>More details about animation hooks provided by reanimated will be covered in the Part 2 of this article with some awesome cool animations that run on UI thread</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b7668db4ecf5" width="1" height="1" alt="">


Vivek Jm.

I specialize in developing mobile experiences.

UX and Full Stack

Recent Projects

Credzy

Build Connect

Happilee

City Weekly

Head Coach

Vibeonix

Urban Chat

Synopsis

About Me

Technologies I love to build with

Reasearch and planning

Informative

Recent Articles