What is a Framework?

In terms of software development, a framework is a structured set of tools, libraries, and conventions that provides a foundation for building applications more efficiently by handling common functionalities so developers can focus on unique features.

A modern web application can combine multiple frameworks to handle different aspects of development efficiently:

• React with Tailwind CSS manages the user interface and styling.

• FastAPI or Django with LangChain handle backend operations and AI functionality, while MongoDB acts as a memory store.

These frameworks communicate through APIs and defined interfaces to work together—for example, a user interaction in the React front end can trigger an AI process through LangChain in the Python back end, which uses MongoDB Atlas Vector Search to retrieve relevant data and then display it back to the user with Tailwind CSS styles.

Table of Contents:

• The framework landscape in 2024

• Application frameworks

• AI frameworks

• Web frameworks

• CSS/UI frameworks

• Testing & infrastructure

• Making the right choice

• The bottom line

• Additional resources

• Frequently asked questions (FAQ)

The Framework Landscape in 2024

Think of frameworks as tools in a technical toolbox. Understanding what each tool is designed to do—and what it isn't—ensures you use the right solution for the task at hand.

The Evolution of Development Frameworks

The framework landscape has transformed dramatically over the past decade. What started as simple libraries for rendering web pages has evolved into sophisticated ecosystems that can:

• Handle complex state management.

• Process real-time data streams.

• Integrate AI capabilities.

• Scale automatically based on demand.

• Deploy across multiple platforms from a single codebase.

Why Framework Choice Matters

Frameworks are puzzle pieces: each has a unique shape and function. When chosen wisely, they fit together seamlessly to create a cohesive application. But forcing incompatible pieces together can lead to inefficiencies and broken functionality.

Here's why your choice matters:

Technical impact

• Performance: Different frameworks have different performance characteristics. Instagram chose React for its virtual DOM, which handles frequent updates efficiently.

• Scalability: Uber's back end uses Node.js because it excels at handling numerous concurrent connections.

• Maintenance: Shopify standardized on React Native to maintain a single codebase for mobile applications.

Business impact

• Development speed: The right framework can accelerate development by 2-3x.

• Team productivity: Familiar frameworks reduce onboarding time from months to weeks.

• Cost efficiency: Proper framework selection can significantly reduce hosting and maintenance costs.

Common pitfalls

• Over-engineering: Using Next.js when a simple HTML page would suffice

• Under-engineering: Using vanilla JavaScript for a complex, state-heavy application

• Misaligned tools: Using Electron (a desktop app framework) to build a simple website

• Trend-chasing: Adopting the newest framework without considering maintenance implications

Let’s dive deeper into the various categories of development frameworks and how they can help you build better applications.

Note: I give framework examples throughout this article, but these are not exhaustive lists and new frameworks are created daily|weekly|monthly.

Application Frameworks

These are your Swiss Army knives of development—comprehensive toolkits that handle the entire application lifecycle. While each framework has its specialties, they typically provide:

• Database integration and ORM support.

• Authentication and authorization.

• API routing and middleware.

• Template engines or component systems.

• Asset management.

• Security features.

• Development tools and debugging support.

What is an application? An application is the combination of individual components working together, including a user interface and backend services, to perform specific functions or a set of functions for users. It’s designed to be fully deployable and operate in production environments.

You'll encounter them in three main flavors:

Full-Stack Web Application Frameworks

• Django and Rails: Perfect for data-heavy applications with complex business logic. They follow the "batteries included" philosophy, providing everything you need out of the box.

• Next.js and Nuxt.js: Modern full-stack frameworks optimized for React and Vue.js, respectively. They excel at building performant applications with capabilities like server-side rendering, static site generation, and API integration.

• Spring Boot: Enterprise-grade framework favored for large-scale Java applications, particularly in financial and banking sectors.

Mobile Application Frameworks

• Flutter: Google's toolkit for building natively compiled apps for mobile, web, and desktop from a single codebase. Known for smooth animations and native performance.

• React Native: Ideal when you want to leverage your team's React knowledge for mobile development. Great for apps that need to feel native while maintaining code sharing between platforms.

• SwiftUI and Jetpack Compose: Native frameworks for iOS and Android, respectively. Ideal when platform-specific features and optimal performance are crucial.

Desktop Application Frameworks

• Electron: Powers apps like VS Code and Slack. Ideal for leveraging existing web development knowledge without having to learn OS-specific languages to build cross-platform desktop applications.

• Tauri: A modern alternative to Electron with smaller bundle sizes and better performance. Uses native system webviews to run apps more efficiently, with less memory and faster startup times. Developers can use their existing web development skills without learning new programming languages for each OS.

• PyQt: A good option for building GUI applications in Python, especially for data science projects. It has a rich set of libraries and widgets, suitable for both small tools and complex apps.

Gaming Frameworks

• Unity: A popular framework used for creating 2D and 3D games. It supports multiple platforms, making it a versatile choice for game developers. Unity is known for its user-friendly interface and extensive asset store.

• Unreal Engine: Known for its high-quality graphics, Unreal Engine is a powerful framework used for both AAA games and indie projects. It provides advanced visual tools and real-time rendering capabilities.

• Godot: An open-source game engine that's lightweight and flexible. Godot is often used for smaller or indie game projects and features an intuitive scene system that makes development straightforward.

AI Frameworks

Here's a crucial point many miss: AI frameworks like TensorFlow or LangChain are powerful, but they're not standalone solutions. These frameworks require integration with other tools and frameworks for data handling, user interface, and deployment to create a complete, production-ready application. These are just another piece of the puzzle.

The exception? Data scientists can use these tools directly in Jupyter notebooks for research and prototyping. But for production applications, you'll need more.

Let's look at the major players and their sweet spots:

AI Model Development Frameworks

• TensorFlow: Google's powerhouse for deep learning, TensorFlow is perfect for applications involving computer vision, neural networks, and production-grade ML. Pinterest uses it for image recognition and recommendations, highlighting its strength in processing large amounts of image data efficiently.

• PyTorch: Developed by Facebook, PyTorch is a flexible framework ideal for research, natural language processing, and quick prototyping. Tesla has utilized PyTorch for various machine learning tasks, including research related to autonomous driving vision systems, demonstrating its versatility in cutting-edge applications.

• JAX: A high-performance numerical computing framework by Google, JAX is well-suited for scientific computing and large-scale transformers. DeepMind has used JAX for advanced AI research, including projects like AlphaFold for protein structure prediction, showcasing its effectiveness in large-scale computational problems.

AI Model Deployment and Serving Frameworks

• TensorFlow Serving: A deployment tool for TensorFlow models, perfect for serving high-performance ML models in production environments. For example, it has been used to serve image classification models for e-commerce platforms, ensuring rapid and scalable response times.

• TorchServe: A robust tool for deploying PyTorch models, perfect for scalable PyTorch model serving. It has been used for deploying chatbot models for real-time customer support, providing flexibility and efficiency in managing conversational AI.

• NVIDIA Triton Inference Server: A multi-framework model serving tool, NVIDIA Triton Inference Server is capable of handling models from TensorFlow, PyTorch, ONNX, and more. It is ideal for managing inference requests for multi-modal AI applications, making it highly suitable for complex AI deployments.

LLM Integration Frameworks

• LangChain: The Swiss Army knife for LLM applications. Ideal for building chatbots and document Q&A systems. It has been employed to create customer service bots capable of accessing company knowledge bases, demonstrating its usefulness in enhancing customer interactions.

• LlamaIndex: Specializing in data connection, LlamaIndex is perfect for building search engines over private data. It has been used to create semantic search systems for internal documents, facilitating more effective data retrieval and organizational knowledge management.

• Hugging Face Transformers: A pre-trained model hub, Hugging Face Transformers allows for the quick deployment of state-of-the-art models. It has been used to add sentiment analysis to customer feedback systems, highlighting its capability in natural language understanding.

AI Data Processing Frameworks

• Apache Spark (MLlib): Ideal for large-scale data transformation and ML, used for processing millions of user interactions in recommendation systems. Its scalability and efficiency make it a popular choice for big data ML tasks.

• Pandas: A widely-used data manipulation and analysis tool that is perfect for data cleaning, analysis, and feature engineering. It is often employed in preparing customer data for churn prediction models, owing to its intuitive data handling capabilities.

• Polars: A high-performance data manipulation framework, used when Pandas is not fast enough for processing requirements. It has been applied in real-time financial data analysis, delivering faster data processing and efficiency.

AI Automation and Orchestration Frameworks

• CrewAI: Used to orchestrate multiple AI agents, making it perfect for complex workflows requiring multiple AI models. It has been used to create a content creation pipeline that plans, writes, and edits, showcasing its ability to automate creative processes.

• Auto-GPT: Develops autonomous AI agents, ideal for self-directed task completion. It has been utilized for automated research and data gathering, highlighting its potential for automating repetitive knowledge tasks.

• Microsoft Semantic Kernel: An AI orchestration tool perfect for integrating AI into .NET applications. It has been used to add AI capabilities to existing enterprise applications, providing a seamless integration of AI functions into established workflows.

AI Data Ingestion and Document Processing Frameworks

• Apache NiFi: A powerful tool for data flow automation, well-suited for real-time data ingestion and processing. It has been used to extract and transform log data before analysis, ensuring efficient data flow for various use cases.

• Haystack: Specialized in document processing for search and QA systems. It has been utilized to create pipelines for indexing documents and answering questions, making it ideal for building internal knowledge base searches.

• Unstructured: Designed for extracting data from a variety of formats, including PDFs, HTML, and images. It’s perfect for handling unstructured content in document processing workflows and has been used to extract relevant information from scanned documents for data analysis.

• Airbyte: An open-source data integration tool that is ideal for connecting and syncing data across multiple sources. It has been used to ingest data from third-party APIs into analytics systems, enabling effective data consolidation.

Interactive AI Web Frameworks

• Gradio: Simplifies the process of building web UIs for machine learning models, making it perfect for creating quick demos for ML models. It has been used to create interactive image classifiers for end users, providing an accessible interface for testing ML capabilities.

• Streamlit: A Python-based web app framework for ML and data science, ideal for turning data scripts into shareable web apps. It has been used to build user-friendly dashboards for exploring model predictions, enhancing the accessibility of ML models.

MLOps and AI Monitoring Frameworks

• MLflow: Used for experiment tracking and model lifecycle management, perfect for keeping track of experiments and model versions. It has been applied to manage multiple iterations of predictive models, supporting organized development workflows.

• Kubeflow: A Kubernetes-native platform for MLOps, ideal for deploying, scaling, and managing machine learning models on Kubernetes. It has been used to run end-to-end ML workflows in production environments, ensuring scalability and consistency.

• Prometheus & Grafana: Monitoring and alerting tools for ML infrastructure, perfect for tracking model inference performance and system metrics. They have been used to monitor latency and resource usage of deployed ML services, ensuring optimal operational performance.

Web frameworks

Web development has evolved into two distinct camps—think of them as the front-of-house and kitchen staff in a restaurant. Both essential, both specialized, but with very different responsibilities.

Note: We already discussed full-stack web application frameworks above, which marry these two together.

Frontend Frameworks

Frontend frameworks handle what users see and interact with, managing everything from data display to user interactions, user input, and how the overall user experience is structured. These frameworks ensure that the interface is visually appealing, intuitive, and responsive to user actions.

They play a critical role in how smoothly data is presented, processed, and updated in real time, providing dynamic elements like animations, form validation, and client-side routing to enhance usability.

By using frontend frameworks, developers can create highly interactive and cohesive user experiences that feel natural and engaging.

• React: Ideal for large-scale applications with complex state management. It features a virtual DOM for optimal performance, making it suitable for highly interactive user interfaces.

• Vue.js: Perfect for both small projects and enterprise applications. It has a gentle learning curve combined with powerful scalability, making it an approachable yet robust frontend solution.

• Svelte: Ideal for when you have performance-critical applications and want smaller bundles. It compiles away framework code for lighter applications, providing better performance and a smaller footprint.

Backend Frameworks

Backend frameworks manage server-side logic, data processing, and system integration, handling everything from receiving and processing client requests to interacting with databases and external APIs. These frameworks ensure that the server processes are efficient, scalable, and secure, supporting high concurrency and maintaining consistent data flows.

They provide the essential tools for developers to build, maintain, and optimize the server-side of applications, including tasks such as handling authentication, managing business logic, and ensuring data consistency.

A well-chosen backend framework allows developers to focus more on creating features rather than dealing with low-level server management.

• Express.js: Perfect for APIs and microservices, offering minimal structure with maximum flexibility. It is highly popular in Node.js environments for building efficient server-side logic.

• FastAPI: Designed for high-performance APIs, with automatic API documentation and type checking. It is commonly used for fast and secure backend implementations in Python.

• NestJS: For large-scale Node.js applications, featuring an Angular-inspired architecture that enhances scalability. It provides a well-structured framework for enterprise-level backends.

CSS/UI Frameworks

Modern CSS frameworks have evolved beyond simple styling to become complete design systems. Gone are the days when CSS frameworks just provided basic grid systems and button styles.

Today's frameworks are sophisticated tools that enable consistent design at scale. They offer features such as responsive layouts, dark mode support, accessibility enhancements, and interactive components.

They've become essential for maintaining design consistency across large applications and teams, while significantly reducing development time and technical debt. Some frameworks even include built-in performance optimization, design tokens for brand customization, and tools for managing design systems across multiple platforms.

They fall into two main categories:

Utility-first Frameworks

• Tailwind CSS: Custom designs with consistent systems. It features rapid prototyping capabilities, highly customizable design tokens, and small production bundles through PurgeCSS.

• UnoCSS: A customizable, efficient, utility-first CSS solution. It provides on-demand CSS for optimal performance and minimal bundle size, making it a modern tool for design system management.

Component-based Frameworks

• Bootstrap: Rapid prototyping and traditional web applications. It offers an extensive library of pre-built components, a responsive grid system, and a rich ecosystem of themes and plugins.

• Material UI: For applications following Material Design guidelines. It includes a comprehensive component library, a theming system, and accessibility compliance features.

Testing and Infrastructure

These frameworks form the backbone of reliable, scalable applications. While they might not get as much attention as flashy frontend frameworks or AI tools, they're the critical infrastructure that keeps modern applications running smoothly at scale.

Testing frameworks ensure code quality and prevent regressions, while containerization and orchestration frameworks handle the increasingly complex world of cloud deployment and scaling.

In an era where a single code change can affect millions of users instantly, or where an application might need to scale from hundreds to millions of requests in minutes, these frameworks aren't just nice-to-have—they're essential for survival. Major tech companies like Netflix, Amazon, and Google rely on these tools to maintain their rapid development pace while ensuring reliability and performance at massive scale.

Testing Frameworks

• Jest: Features snapshot testing, code coverage, and mocking capabilities, making it a popular choice for ensuring the quality of JavaScript codebases.

• Cypress: Provides real browser testing and time-travel debugging, ideal for end-to-end testing of web applications.

• PyTest: Known for its simple syntax, powerful extensions, and easy fixture management, making it a go-to framework for testing Python applications.

Containerization and Orchestration

• Docker: Used for application containerization, providing consistent development and deployment environments with isolated dependencies and efficient resource usage.

• Kubernetes: Orchestration of large-scale distributed applications. It provides automated scaling, self-healing deployments, and rolling updates, ensuring that containerized applications can grow as needed.

Making the Right Choice

Selecting the right framework can determine the success of your entire project. Consider these critical points to guide your decision-making process:

1. Application Type and Scale

• Small site? Consider React or Vue.js.

• Large application? Next.js or Django might be better.

• Need SEO? Look for SSR capabilities.

2. Team Capabilities

• Strong JavaScript? Consider Node.js ecosystem.

• Python experts? Django or FastAPI might be better.

• Need quick ramp-up? Combine key frameworks like Vue.js and Bootstrap.

3. Technical Requirements

• High-performance computing? Consider Rust frameworks.

• Real-time updates? Look at WebSocket support.

• AI requirements? Integration with platforms like Hugging Face and frameworks like LangChain might be essential.

4. Scaling Strategy

• Vertical scaling? Simpler frameworks might suffice.

• Horizontal scaling? You need frameworks with microservices support.

• Global distribution? Consider edge computing capabilities.

5. Long-term Maintenance

• Community size and activity

• Available talent pool

• Corporate backing and stability

• Documentation quality

• Upgrade path complexity

The Bottom Line

Framework selection isn't just a technical decision—it's a strategic one that affects your project's success, team productivity, and maintenance costs. So take the time to understand your options.

Now you should have all of the puzzle pieces, but it's up to you to put them together thoughtfully to create the perfect technology stack that meets both your current and future needs.

Additional Resources

If you'd like to learn how MongoDB integrates seamlessly with many of the frameworks mentioned in this guide, check out the resources below. You'll find that it offers a flexible and scalable database solution that adapts to different use cases.

• How to Integrate MongoDB Into Your Next.js App

• Introducing FARM Stack - FastAPI, React, and MongoDB

• How to Use MERN Stack: A Complete Guide

• Build a JavaScript AI Agent With LangGraph.js and MongoDB

• RAG with Atlas Vector Search, LangChain, and OpenAI

Frequently Asked Questions (FAQ)

What is a development framework?

A development framework is a set of tools, libraries, and conventions that provide a foundation for building applications efficiently. Frameworks handle common tasks so developers can focus on building unique features.

How do AI and development frameworks work together?

AI frameworks can be combined with traditional development frameworks to create intelligent, data-driven applications. For instance, a backend framework like FastAPI can handle incoming requests, while an AI framework like LangChain processes natural language data, providing users with enhanced functionality like chatbots or recommendation systems.

Why is choosing the right framework important?

Choosing the right framework can impact your project's performance, scalability, and maintenance. It ensures that your application meets user expectations, is easy to manage, and can grow as needed.

How do I decide which framework to use for my project?

Consider factors like application type, team expertise, performance needs, scalability, and long-term maintenance. Each of these can guide you in selecting a framework that matches your specific requirements.

Can I use multiple frameworks in one project?

Yes, combining multiple frameworks can be very effective. You might use one framework for the front end, another for backend services, and a third for AI integrations, ensuring that each part of your application is handled by the best-suited tool.

How does MongoDB fit into development frameworks?

MongoDB integrates with many frameworks, acting as the data layer for your applications. It provides a flexible, scalable solution that supports full-stack, backend, and AI frameworks to store and retrieve data efficiently.

We've seen Blitz for NextJS, Adonis for NodeJS, RedwoodJS, and more. All these frameworks tried to build a Laravel for JavaScript.

But none of them were really successful. Why? We'll figure it out in this article. It's worth going over because beginners learning JavaScript struggle to find an all-in-one solution.

This means it can be tough to choose a framework (or library) in JavaScript when you have so many choices – like React, Vue, Angular, Svelte, NextJS, Meteor, and more.

Meanwhile, PHP offers one simple solution: Laravel. It's a one-stop shop with many frameworks and libraries combined into one. But is it the right option for you?

In this article, I'll dive deeper into why the JavaScript ecosystem doesn't have a Laravel-like framework and whether you should switch to PHP for a one-stop solution like Laravel.

I will discuss the advantages and disadvantages of using JavaScript frameworks compared to a one-stop solution like Laravel and end it with a comparison table to help you decide.

What we'll cover in this article:

1. Why JavaScript vs Laravel

2. Why JavaScript lacks an all-in-one solution

3. Benefits of JavaScript frameworks and libraries

4. Benefits of Laravel

5. Differences between Laravel and JS tools

Why JavaScript vs Laravel

When beginners decide to learn Web Development, they often choose between JavaScript/TypeScript and PHP. Other solutions require more expertise, so most beginners gravitate towards these two languages.

Many JavaScript beginners eventually find its vast ecosystem overwhelming, whereas PHP learners often feel constrained by the limited frameworks and lack of advanced capabilities.

To deal with that confusion, I am comparing the tools available for JavaScript and PHP, not the languages directly. Since PHP has an all-in-one solution most developers use, I'll use Laravel for the comparison.

JavaScript lacks a single all-in-one solution or a specific representative framework. Therefore, I'll refer to tools like React, Vue, Angular, and so on as "JavaScript Frameworks."

Let's begin by understanding why the JavaScript ecosystem lacks a Laravel-like framework.

Why JavaScript Lacks an All-in-One Solution

I'll begin by acknowledging that JavaScript developers have tried in the past to make a Laravel for JavaScript.

Start with RedwoodJS. It's an open-source full-stack JavaScript framework started by Tom Preston-Werner, the co-founder and former CEO of GitHub. It helps developers build their applications and ship faster.

Redwood has many innovative solutions packed into one framework. Sounds familiar? That's precisely like Laravel. Do you see anyone shipping using Redwood? Most likely not.

The next option is Blitz. It makes the same promise as Redwood: a replacement for NextJS. Blitz is an all-in-one solution with custom built-in solutions for authentication, database, and so on.

But Blitz doesn't allow developers to choose what they want to use, like Laravel. It has custom solutions crafted by the core team. Developers cannot replace any solution piece with some other recommended solution.

Customization is a point worth noting in the JavaScript ecosystem, and I'll explain why as we uncover more frameworks. But Blitz didn't succeed either.

Then, there's AdonisJS. But, I think you get the point. Each all-in-one solution in JavaScript has tried to implement their version of Laravel – and none of them really took hold.

Blitz, Adonis, and Redwood followed a theme: a full-stack framework of ready-made non-customizable solutions for JavaScript developers to build applications.

These frameworks didn't gain popularity because they didn't meet the needs of the developers they aimed to serve.

The JavaScript ecosystem is unique, offering many solutions for the same problem. There's a reason for this diversity, and why those frameworks didn't succeed.

Let's discuss the reasons and benefits of the current popular JavaScript tools, as they directly impact the choice between JavaScript frameworks and Laravel. As I outline each benefit, consider whether it aligns with your needs.

Benefits of JavaScript Frameworks and Libraries

JavaScript frameworks and libraries are collections of pre-written resources, techniques, and functions created by developers to save time and effort.

These frameworks began emerging in the 2000s, with notable ones like React, Svelte, Angular, NextJS, and Vue standing out over time.

Source: Raygun

However, having more options doesn't necessarily mean greater effectiveness. Below, we’ll explore the benefits of using JavaScript frameworks and why all-in-one solutions haven't succeeded in the JavaScript ecosystem.

Versatility

It's easier to switch or choose one solution over the other in the JavaScript ecosystem. For example, to implement authentication, we have Clerk, Auth0, AuthJS, NextAuth, Supabase, and more.

The JavaScript ecosystem always had multiple options for a specific solution and startups dedicated to providing bespoke solutions. If you didn't like Clerk, you could use NextAuth for more customization.

JavaScript frameworks are highly versatile. When there are ten solutions for one problem, developers can easily switch and see what works for them.

Blitz and other frameworks couldn't succeed for this reason. If a developer disliked Blitz's approach to authentication, they would just switch to another solution.

NPM

Unlike JavaScript, other languages don't have an ecosystem around building tools for others, like libraries or packages. It's not as easy in those languages.

The JavaScript ecosystem has an entire registry filled with packages and libraries for the smallest solutions, like emails. JavaScript has many packages, frameworks, and libraries for each solution.

Source: Kinsta

Ironically, even the NPM registry has competitors. There are multiple other registries with unique packages and features. JavaScript follows the versatility rule everywhere, but does that indicate reliability? Maybe not.

Startups

Each solution for a specific problem is likely a startup funded by VC firms and Angel Investors.

JavaScript-based startups have the capital and the resources to conduct in-depth research and hire the best talent to build bespoke solutions for a targeted problem.

With unlimited resources allocated to a specific topic or problem, the solutions are specific and cater to different needs to their developers.

In return, JavaScript developers pay these startups for those solutions and startups are incentivised to create better solutions for the ecosystem.

The Common Dev

Any developer in the JavaScript ecosystem can identify a problem during their experience using a specific technology, build a solution, and offer it as a product.

JavaScript developers have the liberty to build and sell their solutions because startups push the idea of paying for bespoke solutions and developers have no problem doing that.

Take Marc Lou as an example. He built ShipFast and other products that churn over $100,000 per month. He is an example of the possibilities in the field.

But perhaps these benefits and reasons seem intangible to you. Don’t worry—the web development domain offers more than one alternative. Let’s explore Laravel.

Laravel

Laravel is a framework for the PHP programming language. Taylor Otwell introduced Laravel in 2011.

Source: Cloudways

Laravel offers many solutions packed into one tool, and can be a one-stop solution for everything. It offers authentication, debugging, serverless deployment, user-friendly form systems, starter kits, and so on.

The solutions provided by Laravel are many, but without the core language, they don't mean anything. Laravel is all about PHP.

PHP is a general-purpose scripting language. Rasmus Lardof introduced it to developers in the 1990s. Since then, the language has evolved with significant updates in 2004, 2015, and 2020.

Source: Gecko Dynamics

Before JavaScript frameworks had taken off, developers used PHP with JavaScript.

Laravel is a back-end framework and PHP focuses on the server-side. JavaScript without a framework is a client-side language at its core.

Developers traditionally used JavaScript on the client-side and PHP on the server-side to create full-fledged applications.

However, the tech stack landscape shifted when Laravel gained popularity and frameworks like React began to dominate the JavaScript ecosystem.

Many developers worldwide, especially from countries like India, are doubling down on PHP because of its robust and reliable nature.

Government websites and large infrastructures use Laravel (PHP) because it supports a variety of solutions in one place. Many developers don't want to combine and switch technologies.

Companies and individuals using PHP or Laravel want to ship quickly, make changes, and avoid learning a new library or technology at every step of the way like JavaScript.

PHP only has JavaScript as its direct rival that challenges its existence. However, JavaScript isn't the best for many situations. Let's see how Laravel performs better.

Benefits of Laravel

One-Stop Solution

Laravel is an all-in-one framework. It contains everything a developer would reasonably require to build compact, reliable, and robust solutions.

You don't need to spend time searching for various libraries and frameworks that may or may not integrate well with your foundational technology—it's all built-in for you.

If speed of deployment is your priority, Laravel is the ideal choice.

Moreover, for PHP developers using Laravel, there's less need to learn new libraries, syntax, and more because everything is integrated seamlessly.

Less Wasted Time

The PHP ecosystem has fewer solutions for specific problems. It's difficult to identify a specific solution for a specific problem.

Developers rather choose an all-in-one solution than invest time in finding bespoke solutions for specific problems.

That's where the PHP ecosystem shines because developers don't spend a lot of time trying out different options. They already have everything in one place.

If there's a new project, their go-to choice is Laravel. In the JavaScript land, if a developer isn't using an existing solution or tech stack, they are likely finding a new one or creating one.

Stable and Robust

Web Applications created using PHP are robust because the framework is battle-tested. You can create anything using it.

You could sabotage the entire application if you mess up with one choice of library or framework in a JavaScript project. But it's not the same with Laravel.

Since Laravel has fewer solutions, the chances of sabotaging are reduced to the bare minimum.

No Catching Up

With Laravel, you don't need to catch up with new technologies and frameworks frequently. You can learn one framework, library, or skill and consider it useful for a long time.

It's the opposite in JavaScript. Unlike JS, Laravel has more stable and less frequent updates.

The PHP ecosystem receives fewer updates so developers can reliably use the existing features without worrying about another framework or library providing a better solution or another version.

A new framework or library doesn't pop up each week. You don't need to follow up on versions frequently.

A Massive Community

Laravel was first launched a decade ago. It has gained popularity over time and invited many developers to create communities and share ideas.

Every PHP developer uses Laravel. If you ever need any help, you always have developers helping you.

Free Solutions

Most PHP frameworks and libraries are open-source and free to access. Startups are rare in the PHP ecosystem.

If a developer is offering any bespoke solutions, most are public, especially free.

Any PHP developer can refer to those open-source free solutions, contribute to them, and extend those solutions further.

Differences Between Laravel and JS Tools

You can create any type of application using both of these technologies. But the experience won't be exactly the same, of course. Here are some of the differences:

And that's it! I hope you enjoyed the article and learned something new. If you want, you can also follow me on Twitter (X) or LinkedIn. Also, I've built a Notion Dashboard for Software Engineers to ace their coding interviews.

You'll commonly come across frameworks in roadmap resources, when speaking with other developers, when learning about a new coding tool, and many other places.

In this article, you will learn what a framework is in software engineering, why you need frameworks, the different types of frameworks that exist (and examples of them), and how you can get started learning a framework.

What Is a Software Framework?

The term framework can refer to a structure. It could be the structure of a system, a building, a project, or anything else.

You can now apply this definition in software engineering and refer to software frameworks as the structure for your software.

A software framework is a structure that you can use to build software. It acts as a foundation so you don't have to deal with creating unnecessary extra logic from scratch.

A framework is similar to a template in that you can modify it and add certain features and higher functionalities to create a complex and broad project that many people can use.

Note: Software frameworks are typically associated with specific programming languages. They're also appropriate for various tasks depending on the situation.

You also have backend frameworks for backend tasks, frontend frameworks for frontend tasks, mobile frameworks for mobile tasks, and many others.

Why Use Software Frameworks?

Writing code is complex. And writing code that others can understand and manage is even more difficult because you must deal with syntax, declarations, performance, staying consistent, and other issues.

Software frameworks provide a template in which almost all general tasks have been handled. This allows you to focus on the core software development rather than the details of the process. Given that there is a set structure, it is simple to collaborate with others.

It's a good idea to use a software framework rather than re-inventing the wheel from scratch for numerous reasons. And perhaps the most important reason is that you won't have to write everything from scratch. This reduces the possibility of adding errors to your code.

Other reasons to use a framework include:

• It helps you avoid duplicate and redundant code.

• It makes it easier for developers who did not write the code to test and debug it.

• Frameworks are maintained by a group of people who test them so that you can use them with confidence.

• They help you write clean and secure code

• The time required to develop an application is significantly reduced because you can now focus on writing project-specific code.

And a lot more.

Types of Software Frameworks

When you have a project to build or work on, you first decide on the programming language to use. Once you know the programming language, it's always best to look for frameworks that suit your needs.

There are many of these frameworks, each with unique characteristics that set them apart. You can find these frameworks in all areas of software engineering, including web development (frontend and backend), mobile applications, data science, and many others.

Let's look at some of the main types of software frameworks you'll come across in your development journey.

Web Development Frameworks

Web development involves creating a website that runs on the internet. This can be a single-page web application, a static website, a dynamic website, or anything else.

When creating these web pages, you usually have a frontend that the users see and a backend that controls and handles the logic (such as a database, API, and many other things).

Rather than list them all together, let's divide these frameworks into categories, so you know which to use when.

Frontend Development Frameworks

React is a frontend JavaScript framework developed by Meta (previously Facebook). It helps you create user interfaces for websites and web applications. It is a popular framework that millions of developers worldwide use to create single-page applications (SPAs).

React uses Redux for state management and hooks to handle component behavior and logic. It also uses JSX to create HTML and CSS within JavaScript.

There are many helpful resources about React on the internet. You can learn more about React and how to get started in this guide.

Angular is a TypeScript-based framework developed by the Angular Team at Google. It is an open-source framework you can use to create single-page web applications, similar to React and Vue.

It has features such as two-way data binding, which reduces development time, and dependency injection, which makes it easier for different pieces of code to interact.

An enthusiastic community with numerous resources supports Angular. You can learn more about Angular and get started in this course.

Vue is a progressive JavaScript framework for creating user interfaces and single-page applications. It is easy to learn and pleasant to write in. It was built by Evan You, who previously worked at Google, to take the best parts of Angular and build a custom tool around it.

Vue3 is the latest version, which happens to be way faster and lighter than previous versions. It also comes with improved TypeScript support and many other features like the composition API.

You can learn more about Vue and how to get started in the course.

Bootstrap is a framework that makes it easy for developers to build a fully responsive website or web application using a collection of reusable HTML, CSS, and JavaScript code. It has a group of pre-defined codes in a downloadable file or CDN that anyone can access and use.

You can learn more about Bootstrap and how to use it in this course.

There are many other frontend frameworks like Svelte, Semantic UI, and lots more. All these frameworks are used by famous companies like Netflix, Uber, Airbnb, and others.

Backend Development Frameworks

Django is a backend Python web framework that can work with any frontend framework. It helps developers focus on writing and building a significant project rather than re-inventing the wheel.

It's fast, secure, and scalable. You can learn more about Django and how to get started building websites in this course.

Rails is an open-source backend framework like Django, powered by the Ruby language. It provides default structures for databases, web services, and web pages. It is designed to involve less code and repetition and is supported by a large community.

It is also known as Ruby on Rails. You can learn more about Rails and how to get started in this course.

There are many other backend frameworks like Express, Laravel, and lots more. These frameworks are used to build websites and applications by famous companies like Twitter, Shopify, Coinbase, and others.

Mobile Application Frameworks

Flutter is an open-source UI software development kit created by Google. It uses the Dart programming language and a little C/C++. You can use it to develop cross-platform applications for devices such as Android, Windows, Linux, macOS, iOS, the web, and lots more from a single codebase.

It was developed in 2017 and has since been used by big companies like Alibaba, BMW, and many more, as seen in the Flutter showcase web page. You can learn more and get started with Flutter in this course.

React Native is an open source cross-platform Javascript framework developed by Meta. Cross-platform means that you can use it to develop Andriod, IOS, and web applications with one code base.

React Native uses the React framework and offers many inbuilt components and APIs. You can learn more and get started with React Native in this course.

There are many other mobile application frameworks like ionic, Xamarin, and lots more. These frameworks are used to build popular applications for famous companies like Discord, Bloomberg, and lots more.

Data Science Frameworks

PyTorch is an open source machine learning framework based on the Python programming language and the Torch library. It is one of the preferred platforms for deep learning research. It is built to speed up the process between research prototyping and production deployment.

You can get started and learn more about using PyTorch for deep learning in this course.

TensorFlow is a free and open-source Python library for machine learning and artificial intelligence developed by Google. It has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers dive into machine learning. Developers can also use it to quickly build and deploy ML-powered applications.

You can learn more about TensorFlow and how it works with computer vision in this course.

There are many other data science frameworks like Apache Spark, Scikit-learn, and lots more. Big companies like Microsoft, Cisco, Amazon, and others use these frameworks.

How to Get Started Learning a Software Framework

So far, when discussing these frameworks, you will notice we also talk about specific programming languages. This should tell you that each framework relies heavily on a particular programming language.

You should have a solid understanding of the programming language a framework uses before learning that framework.

For example, if you want to learn React, you must first understand JavaScript and some of its key concepts. This is also true for other frameworks.

Finally, the better you understand a programming language, the more straightforward it'll be for you to grasp how frameworks function. Programming languages provide a solid foundation for many tech career paths and are critical for understanding a framework.

Wrapping Up

In this article, you've learned what a software framework is, how they work, and how to get started learning any of them.

It is important to note that these are only a few of the many frameworks available. Almost every programming language has a framework designed to make using that language much more straightforward that'll allow you to focus on building your project.

It is always best to research which framework best suits your needs before beginning to build or write code.

Have fun coding!

And if you want to get into coding, it's important to learn and understand some of the popular frameworks – regardless of the field you choose in the industry. ‌‌‌‌But why? ‌‌‌‌

Frameworks help you easily create new apps and ideas without having to write as much code yourself.

They also help eliminate a lot of headaches, so you can spend your time on what really counts.

Basically, they can be a real time saver.

In this article, we will explore:

• What is a framework?
• What is a software framework?
• Examples of software frameworks
• The difference between a library and a framework

So let's get started!

What is a Framework?

_Photo by [Pexels](https://www.pexels.com/@photolisious?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels" rel="noopener">Ludvig Hedenborg from <a href="https://www.pexels.com/photo/brown-and-black-axe-3433348/?utm_content=attributionCopyText&utm_medium=referral&utmsource=pexels" rel="noopener)

Imagine, if you will, a guy called John.

John needs to cut down a tree to light his fireplace up to make his family warm.

He goes into the woods, some time passes, and he finally chops down a tree.

Then, he needs to cut the tree into small pieces that can fit in his fireplace.

_Photo by [Pexels](https://www.pexels.com/@ron-lach?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels" rel="noopener">Ron Lach from <a href="https://www.pexels.com/photo/axe-stuck-in-trunk-10397927/?utm_content=attributionCopyText&utm_medium=referral&utmsource=pexels" rel="noopener)

Finally, John has successfully cut all the wood needed in the right size to warm his family.

But, what if John had a chainsaw instead?

_Photo by [Pexels](https://www.pexels.com/@karolina-grabowska?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels" rel="noopener">Karolina Grabowska from <a href="https://www.pexels.com/photo/crop-lumberman-sawing-log-with-electric-power-saw-4205983/?utm_content=attributionCopyText&utm_medium=referral&utmsource=pexels" rel="noopener)

‌If he had a chainsaw, the work would be done much more quickly and he would lose less time and energy cutting the wood for the fireplace.

Especially if he needed to chop down many trees.

But John likes to use his axe because he says it allows him more control over every bit of wood he chops off.

And with an axe he is able to cut small tree branches and it is better to chop up the wood.

So, with an axe, he can take care of minor things more easily. We don't need a tool like a chainsaw to do it. But when we're cutting down many big trees, it is a good idea to use a chainsaw, because it saves time and effort.

The same applies to coding. When we're programming and we just need to do simple stuff, it is better to just write our own code from scratch and/or get some libraries to help us with that.

But when we need to tackle many big projects, it is better to use a framework, because the project is big and frameworks can save us time.

According to the analogy:

• Cutting the tree with an axe = programming from scratch
• Cutting trees with a chainsaw = Programming with a framework

A chainsaw allows people to more easily cut trees.

A framework allows people to more easily develop programs.

What is a Software Framework?

Just as the chainsaw is a tool to work faster and more efficiently, a software framework is also a “tool” that helps a programmer work faster and achieve more in less time.

Just as there are many types of chainsaws, there are also many types of software frameworks.

Examples of software frameworks

Now I'll share how and where you can use different frameworks in different areas of programming.

Web development frameworks

Web development frameworks make it easier to interact with the website database.

Frameworks automate functions and boring processes used to record and retrieve user-input data.

These frameworks can also make it easier to arrange and organize elements when you're designing the front-end of the site.

Vue is an example of a front-end web development framework.

Front-end means it is only the part the user sees – in other words, the presentation layer or OSI layer 6.

As a web development framework, Vue:

• Can Scale large applications
• Supports typescript
• Has its own router
• Has a state management library

This is one of the most used frameworks in the web development industry, along side with React and Angular.

The following organizations use Vue:

• Upwork
• Alibaba
• Euronews
• Google careers Platform

I recommend Vue because I think it's easier to learn compared to other web development frameworks like React and Angular. Vue is also growing in popularity.

Normally, developers choose which framework they are going to use based on their team experience, the type of project their working on, or the complexity of their projects.

It really depends on your circumstances.

You can check out Vue's official site for more information.

Machine learning frameworks

Machine learning frameworks help programmers by making it easy to implement complex ML algorithms in their programs.

You don't have to create these complex algorithms by yourself. Someone has already done it for you.

This makes your life easier as you just have to get your dataset, optimize the data to be used in the machine learning model, save the model, and run your analysis.

One of the most popular machine learning frameworks worldwide is PyTorch.

PyTorch is a machine learning based on the torch library, developed by Facebook AI research lab.

PyTorch has:

• Open Neural Network Exchange support
• Hybrid Front-End
• Dynamic Computational Graph Support
• Data Parallelism

PyTorch has been used in some cool projects, like:

• Amazon has reduce inference costs by 71% and drive scale out using PyTorch, TorchServe, and AWS Inferentia.
• Stanford PyTorch’s flexibility to efficiently research new algorithmic approaches.
• Used in tesla cars to detect traffic lights, crosswalks, roadsigns...

Many GitHub projects use this framework, from computer vision to natural language processing applications.

I recommending PyTorch because it is easy to learn compared to other machine learning frameworks, it's written in Python, it has a big community around it, and so much more!

You can also check out TensorFlow and sci-kit-learn, as they are also very popular.

Just keep in mind that TensorFlow and sci-kit-learn are both libraries, not frameworks. We'll discuss the difference more below.

In general, companies use TensorFlow, while machine learning researchers use PyTorch.

This is mainly for three reasons:

• Python's API hasn't changed much over the years compared to TensorFlow, so the code from some months back is almost the same in PyTorch. In Tensofrlow, it may be different or even not run at all.
• The Tensorflow API has changed, but the documentation has not changed much, making it difficult for researchers to find online help.
• Most research done by big companies is in PyTorch.

So, if you are reading research in advanced stages, most of the code you see will be in PyTorch.

There are many more reasons for this, but these are just some examples.

Here is the website for PyTorch:

Mobile development frameworks

Mobile development frameworks help programmers a lot by automating many tasks that would otherwise make maintaining projects a hassle.

For example, instead of using 50 lines of code to create a button or to better navigate the space in a screen, frameworks let you drop some button code in, ready to apply to your app.

With a framework a lot of that work is already done for you.

React native is a mobile development framework based on the React library.

This framework comes from the web version of React.

This mobile framework was one of the most popular in the world from 2019 to 2021.

Its main features are:

• Seamless Cross-Platform Development
• Fast Refresh
• Code Reusability
• Improved UI/UX
• Hot Reload

Just as with PyTorch, React Native has also been used to develop many projects:

• Instagram
• Airbnb
• Uber eats
• Pinterest

I recommending React Native because it's based on React.

And if you know JavaScript and React well, you can easily develop cross platform apps.

There are also Flutter, kivy, cordova, and many more mobile development frameworks.

Compared to React native, flutter uses the Dart programming language, Kivy uses Python, and Cordova uses HTML, CSS, and JavaScript

With all of these frameworks, the best choice comes down to what knowledge you already have and the constraints placed on you by your company or team.

For example, if you already know how to use Python and want to develop a small personal project, maybe the best choice is Kivy.

If you join a company and work on the front end with React, is best choice is probably React Native.

Since there are many choices, it really come down to your requirements and projects.

Here is the website for React Native:

These are just three types of frameworks you can look into. Also, keep in mind that there are many frameworks. I just showed you some of them here.

What's the Difference Between a Library and a Framework?

If you're new to coding, you might not know the differences between a library and a framework. But they're not the same thing.

A library is code from a collection of files that someone wrote pre-made for your project.

Like using a shovel. You can use it to dig whatever you want.

Photo by Anna Tarazevich: https://www.pexels.com/photo/a-shovel-on-brown-dirt-ground-7299923/

A framework is like using an excavator. While you can dig more dirt with an excavator, you only use it for specific (big) construction projects.

Photo by Ilya: https://www.pexels.com/photo/construction-vehicles-at-work-5328418/

With a library, you are in control of the code. You use the library to add new features to help your project

With a framework, you are limited by it. You can only work with the "space" the framework gives you. There are also technical reasons for this, which you can read more about in this article.

Should I use a framework or library for my project?

It depends on the complexity of your project, who or what teams will maintain it, and so on.

By analogy, imagine that one of John's hobbies is wood carving.

To do that, he needs to use a simple set of tools to cut wood. He cannot use his axe.

While it can help in some phase of his project, it can also, by accident, destroy the project. It can't work in fine enough detail.

So in this case, the best thing to do is to do everything from scratch. The same applies to programming.

If you want to do a simple project, but need to use function you don't know how to create, you should use libraries.

If you want to work on a complex project where there are a lot of things you don't currently understand, a framework might help you get going.

Also keep in mind that if you work at a big company you might write the code without using any frameworks at all. This way, there is more space for programmers and engineers to develop projects without any limitations.

In many cases, simple programming projects are better the fewer library dependencies they have.

And in general, I believe that the more you code your projects yourself, the better the project is. At least in most cases. :)

Wrapping up

Great! In this article you have learned:

• What a software framework is
• 3 different software frameworks and how to learn more about them
• The differences between a software framework and software library

Python has grown in popularity immensely in recent years. It has a wide range of applications, from its most popular use in Artificial Intelligence, to Data Science, Robotics, and Scripting.

In the web development field, Python is used mainly on the backend with frameworks such as Django and Flask.

Before now, Python didn't have much support on the front-end side like other languages such as JavaScript. But thankfully, Python developers have built some libraries (such as Brython) to support their favourite language on the web.

And this year, during the PyCon 2022 conference, Anaconda announced a framework named PyScript that allows you to use Python on the web using standard HTML.

You can check out this tweet about the launch:

Prerequisites

You'll need the following tools and knowledge to code along with this article:

• A text editor or IDE of your choice.

• Knowledge of Python.

• Knowledge of HTML.

• A browser (Google Chrome is the recommended browser for PyScript).

What is PyScript?

Source: PyScript official website

PyScript is a Python front-end framework that enables users to construct Python programs using an HTML interface in the browser.

It was developed using the power of Emscripten, Pyodide, WASM, and other modern web technologies to provide the following abilities in line with its goals:

• To provide a simplistic and clean API.

• To provide a system of pluggable and extensible components.

• To support and extend standard HTML to read opinionated and dependable custom components in order to reach the mission “Programming for the 99%.”

Source: Anaconda Blog

In the last couple of decades, Python and advanced UI languages like modern HTML, CSS, and JavaScript have not worked in collaboration. Python lacked a simple mechanism to create appealing UIs for simply packaging and deploying apps, while current HTML, CSS, and JavaScript can have a steep learning curve.

Allowing Python to utilize HTML, CSS, and JavaScript conventions solves not only those two problems but also those related to web application development, packaging, distribution, and deployment.

PyScript isn't meant to take the role of JavaScript in the browser, though – rather, it's meant to give Python developers, particularly data scientists, more flexibility and power.

Why PyScript?

PyScript gives you a programming language with consistent styling conventions, more expressiveness, and ease of learning by providing the following:

• Support on the browser: PyScript enables support for Python and hosting without the need for servers or configuration.

• Interoperability: Programs can communicate bi-directionally between Python and JavaScript objects and namespaces.

• Ecosystem support: PyScript allows the use of popular Python packages such as Pandas, NumPy, and many more.

• Framework flexibility: PyScript is a flexible framework that developers can build on to create extensible components directly in Python easily.

• Environment Management: PyScript allows developers to define the files and packages to include in their page code to run.

• UI Development: With PyScript, developers can easily build with available UI components such as buttons and containers, and many more.

How to Get Started with PyScript

PyScript is fairly easy and straightforward to learn. To get started, you can either follow the instructions on the website or download the .zip file.

In this article, we'll be using and learning how to use PyScript via the website. You can do this by linking the components in your HTML file. Let’s print our first “Hello World” with PyScript.

Create an HTML file

To begin, you'll need to create an HTML file to display text on your browser using the text editor/IDE of your choice.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>

</body>
</html>

Link PyScript

After creating the HTML file, we'll need to link PyScript in your HTML file to have access to the PyScript interface. This will be placed in the <head> tag.

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

Print to browser

Now that you've linked PyScript to the HTML file, you can print your “Hello World”.

You can do this with the <py-script> tag. The <py-script> tag allows you to run multi-line Python programs and have them printed on the browser page. Place the tag in between the <body> tags.

<body> <py-script> print("Hello, World!") </py-script> </body>

The full code for the HTML file is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>
    <py-script> print("Hello, World!") </py-script>
</body>
</html>

On your browser, you should see this:

Tip: If you're using the VSCode editor, you can use the Live Server add-on in VSCode to reload the page as you update the HTML file.

More Operations with PyScript

There are more operations you can perform with the PyScript framework. Let's look at some of them now.

Attach labels to labeled elements

While using PyScript, you might want to pass variables from your Python code to HTML. You can do this with the write method from the pyscript module within the <pyscript> tag. Using the id attribute , you get to pass strings displayed as regular text.

The write method accepts two variables: the id value and the variable that will be provided.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>

  <body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
    </py-script>
  </body>
</html>

And the output becomes:

Run REPL in the browser

PyScript provides an interface for running Python code in browsers.

To be able to do this, PyScript uses the <py-repl> tag. The <py-repl> tag adds a REPL component to the page, which acts as a code editor and allows you to write executable code inline.

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <py-repl id="my-repl" auto-generate=true> </py-repl>
</html>

Trying it out in browser (preferably Chrome), you should get this:

Import Files, Modules, and Libraries

One of the functions PyScript provides is flexibility. In PyScript you can import local files, inbuilt modules, or third-party libraries. This process uses the <py-env> tag. This tag is for declaring the dependencies needed.

For local Python files on your system, you can place the code in a .py file and the paths to local modules are provided in the paths: key in the <py-env> tag.

Let’s create a Python file example.py to contain some functions:

from random import randint

def add_two_numbers(x, y):
    return x + y

def generate_random_number():
    x = randint(0, 10)
    return x

Then the Python file will be imported into the HTML with the <py-env> tag. You should place this tag in the the <head> tag, above the <body> tag.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - paths:
          - /example.py
      </py-env>
    </head>

  <body>
    <h1>Let's print random numbers</h1>
    <b>Doe's lucky number is <label id="lucky"></label></b>
    <py-script>
      from example import generate_random_number
      pyscript.write('lucky', generate_random_number())
    </py-script>
  </body>
</html>

This will return:

For third-party libraries that are not part of the standard library, PyScript supports them.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
            - numpy
            - requests
      </py-env>
    </head>

  <body>
    <py-script>
    import numpy as np
    import requests
    </py-script>
  </body>
</html>

Configure metadata

You can set and configure general metadata about your PyScript application in YAML format using the <py config> tag. You can use this tag in this format:

<py-config>
  - autoclose_loader: false
  - runtimes:
    -
      src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
      name: pyodide-0.20
      lang: python
</py-config>

These are the optional values that the <py-config> tag provides. They include:

• autoclose_loader (boolean): If this is set to false, PyScript will not close the loading splash screen.

• name (string): Name of the user application.

• version (string): Version of the user application.

• runtimes (List of Runtimes): List of runtime configurations which would have the following fields: src, name, and lang.

Conclusion

In this article, you learned what PyScript is all about and how to use it in HTML files to run Python code on the browser. You also learned about the various operations/functionalities you can do with PyScript.

With PyScript, it’s easier to run and perform Python operations on the web, as this wasn’t easy before. This is a great tool for anyone who's looking forward to using Python on the web.

PyScript is still in its early stages and under heavy development. It is still in its alpha stage and faces known issues like the load time which can affect usability (some other operations can’t be shown at the time of this writing due to performance issues). So you shouldn't use it in production yet as there will likely be a lot of breaking changes.

References

• The PyScript official website.

• Anaconda blog.

• PyScript source code.

• Guide on getting started with PyScript.

Have you ever wondered how frameworks are built? A couple of weeks ago I was writing an article and asked myself, what's the first line of code Evan You wrote to build Vue.js?

Well, thanks to Git and Evan You pushing Vue's code to GitHub, I have been able to travel back in time, like Marty McFly with his DeLorean time machine. But I went nine years back, to 2013, and "watched" Evan writing his code.

Photo by wallup.net

What's the goal of this article?

I am writing this article to show you what's behind a popular tool like Vuejs and what could be the starting point for building something like it. Specifically, we'll look at what was Evan's You starting point.

We will learn from Vue's creator by looking at the source code of his oldest commits. We'll examine what he wrote to make the first implementation of a Vue application and how he wrote the logic in plain JavaScript to make the mustache syntax work.

What is Mustache syntax?

Well, if you are wondering what the hack is mustach syntax, let me explain. It is a basic form of data binding used by Vuejs to interpolate text inside a template.

From the vue documentation:

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):

<span>Message: {{ msg }}</span>

The mustache tag will be replaced with the value of the msg property on the corresponding data object. It will also be updated whenever the data object’s msg property changes.

Ok, now that you know what that is, in the next section I'll answer your next question...

What will I learn after reading this article?

Ok fair enough, you want to know why should you read this article and what will you learn from it.

If you are either a seasoned Vuejs developer or just at the beginning of your journey, you will learn how everything started for a popular tool like Vue.

You will also learn how to hunt for a specific feature of a framework, browse old GitHub commits, and understand how you can apply plain JavaScript knowledge to start building the first features of one of the most popular frameworks of our time.

In the next section we will start exploring the Vue.js repository. We will look at the fist and second commits to understand what files were created for the initial setup of the framework.

This will help us find the feature that we are looking for (mustache syntax) and figure out also how the first Vue application was made.

Exploring Vue's Oldest Commits

Alright, let's get started. If you want to follow me on this time traveling journey, hit this link. There, you'll find the Vuejs repository tagged 0.6.0. We are interested in its first and second commits.

I have downloaded a copy of the source code locally, precisely the source code of the second commit. Let's browse the code.

The Folder Structure

The project structure in the second commit is fairly simple. Apart from a bunch of configuration files for jshing, grund, GitHub and the two JSON files, we can see three folders:

• test
• src
• explorations

The last one is an addition Evan made. The exploration folder wasn't there on the first commit. And it is in there that the actual creation of Vue.js started to take place.

We will come back here later in the article, but before that let's look at the fist commit to find Evan's fist lines of code. Spolier: everything starts with a test.

The First Vue Test Case

The first lines of code are, I believe, those written in the test.js file. This is where Evan used the Mocha library to write Vue's first test case and set up the tests framework in the first commit named initial setup.

Why is this relevant? Well, we are not just hunting for a specific feature but we also want to understand what's the starting point for building a tool like Vuejs.

Do you start by writing the implementation? Or do you write a basic test case just to set everything up so that you can write proper tests when you have an idea of what you want to implement?

Well, below you have your answer!

Let's check the code of the test/test.js file:

var Element = require('element')

describe('Element', function () {
    it('should have a variable', function () {
        assert.equal(Element, 123)
    })
})

On the first line, there is a require statement to import an element class that will be defined somewhere later on in the code. Imagine this as the ancestor of the Vue class.

Next, the Mocha describe function is set to provide a general context. Within it, an it function is called to write the actual test case that checks if the imported Element class is equal to 123, which it does using the method assert.equal().

To run the tests we will have to install all dependencies npm i and run the Grunt tasks. But since most of the libraries used are deprecated we won't do that (and this is also not the goal of this article and video).

In the next section, we will explore the second commit aiming to reach our goals – find the first implementation of Vue.js, and understand how the mustache syntax works.

To do that, we need to look at the second commit's source code, which is the one I have downloaded and am exploring on VSCode (if you are following the video as well).

Here is the direct link.

The First Vue Application

In Vue, everything we do is done inside a Vue application, which is bound to an istance of the Vue class. So, we first need to find the first implementation of this class and in there we will find the logic behind the mustache syntax.

Ok, we need to look inside the explorations folder – here is where the magic happens.

The main file is called getset-revitis-style.html, and here we can see all the logic of the first Vue application (which you can find in the body tag) and its first implementation (which you can find in the script tag).

I made a copy of the entire file and placed everything inside an index.html file so we can mess around with the code, add some console logs, and explore how it works.

Let's serve the file using serve -s. (To run this command you will need to install an npm package. Just type in the terminal npm install -g serve.)

In the body tag we can see the Vue app, in div with an id of test. Today we either define our app inside a root element with an id of app or root, but at the time it started with a test div.

 <div id="test">
   <p>{{msg}}</p>
   <p>{{msg}}</p>
   <p>{{msg}}</p>
   <p>{{what}}</p>
   <p>{{hey}}</p>
  </div>

Inside the test div we can see the double mustache syntax. Cool! This is the first time it was used, but how does it work?

In the next section we will explore the first Vue class and look for the logic to make this {{msg}} work.

The First Vue Instance

Ok, we found the firt usage of this syntax, but we are not done yet. We want to know how it works, remember? So, let's look in the script tag where we will find the logic of the first Vue class.

Evan created a class called Element – remember that we are nine years back in time, and ES6 isn't a thing until 2015.

The class declaration is written using function Element () {}. This is the ancestor class of what we know today as the Vue instance that we instantiate by doing new Vue().

function Element (id, initData) {
  // The first implementation is in here
}

Next, the first Vue instance is created by instantiating the Element class:

var app = new Element('test', {
  msg: 'hello'
})

The class expects an id and an initData. These are passed to the instance as the test value and as an object {} with a property called msg. This is our first implementation of the options object.

Ok, we are getting there. Now that we know how the class was implemented and instantiated, let's look inside to find how the double mustache syntax was implemented.

How the Mustache Syntax Works

Here we are. The next code block will show us the syntax secrets. This is what we have been aiming to understand, the article's goal.

After this you will be able to understand what's behind this syntax and even edit and replace it with your own.

You could do something like [[msg]] and maybe call it the double box syntax. 🤓

The code below is used to make the double mustache syntax work. In between there is more code that is responsible for how data are bound.

var bindingMark = 'data-element-binding' // <-- data binding mark 

function Element (id, initData) {
// The first implementation is in here
  var self = this,
  el = self.el = document.getElementById(id)
  //console.log(self.el)

  bindings = {} // the internal copy
  data = self.data = {} // the external interface
  content = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)

  el.innerHTML = content


  // ....

  function markToken(match, variable) {
    console.log(match) // <-- LOG match = {{msg}}
    console.log(variable) // <-- LOG captured group as variable = msg
    //console.log(bindings)
    bindings[variable] = {}
    //console.log(bindings)

    console.log('<span ' + bindingMark + '="' + variable + '"></span>')
    return '<span ' + bindingMark + '="' + variable + '"></span>'
  }

  // ...
}

I have added a couple console logs to figure out what's inside two key parameters (match and variables) and what the markToken method returns.

Inside the script tag the fist line is a variable var bindingMark = 'data-element-binding'. This variable will be used as a data attribute and will replace the contents of the curly brackets using the replace method with a regular expression el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken).

Yes, you got it right – behind this syntax there is plain JavaScript and specifically one of the oldest methods built in the language.

string.replace() is a string method that accepts two parameters:

• the regular expression
• a callback function

Check the result of the regex using a site like to see what matches the regex \{\{(.*)\}\}.

When the callback function markToken is called, we have access to the match and the captured group, respectively used as parameters called match and variables.

You can see these two parameter values using the console logs I added in the source code.

Inside the markToken method, the first line after the console logs is bindings[variable] = {}. This is an internal copy of the data that will be used later for the data binings feature of the framework.

For each match, it sets a new property in the bindings object as an empty object. For instance, if we have {{msg}} a new property called binginds[msg] = {} will be created.

Finally, the return statement builds a span element that uses the value of the bindingMark variable as a data attribute, data-element-binding and assigns to it the variable parameter as property.

So, instead of {{mess}} the following string '<span ' + bindingMark + '="' + variable + '"></span>' is created. The result is the following code:

<span data-element-binding="msg"></span>

The Vue code is still at its early stages. The implementation of the mustache syntax works alongside data bingind that is not yet fully implemented at this point of the framework.

Conclusion

In this article, we discovered the first steps Evan You took to build Vue.js. This is a raw implementation of the framework, and we have seen only a small bit of its code. But it can help us figure out how one of the framework features worked. And hey, things always start small to grow over time.

Let me know if you liked this kind of content. Reach out to me if you want to know what's behind a different feature of Vuejs.

You can also consider subscribing to my YouTube channel.

And you can follow me on Twitter and Linkedin.

These days, a new trending front-end framework is released every now and then. But React and Vue.js still stand as the most popular among all the other alternatives.

And although both are performant, elegant, and arguably easy to learn, they have some different opinions on how certain things should be done, and different ways of achieving the same end result.

I believe getting comfortable and efficient with a frontend framework is mostly about learning the patterns of doing regular stuff.

You know, how to listen to changes of a parameter/data and perform some action on that. And how to bind an event listener or data to an action object (button, checkbox, etc) and so on.

While I was working on a side-project with React, I noticed that my mind was like: "Yeah, I could do it like this in Vue, I would emit an event from the child, then listen for it in the parent and update this data". And then I was Googling how to do something like that in React.

In this article, I am going to show you how to apply some common patterns in both React and Vue that you'll come across in your daily front-end work. Then you can use these recipes to easily transition from one framework to the other one.

This will be helpful whether you are an experienced Vue developer who needs to work on a React project or the other way around. I will be using modern React with hooks and the Vue Options API (Vue 2).

I suggest cloning the repository that contains all the code I use in this article and rendering the respective components in each section and playing with them to really understand how they work.

After cloning, you need to run npm install in the React and Vue folders. Then you can start the React project with npm start and the Vue project with npm run serve.

https://github.com/yigiterinc/VueVsReact

Table of Contents

• Component Structure in React vs Vue
• How to use State in React and Vue
• How to Use Props in Vue and React
• How to Create Methods/Functions in Vue and React
• Styling Options
• How to Bind Form Input to Data (State)
• How to Handle Events (User Input)
• Conditional Styling
• Conditional Rendering
• Rendering Arrays (Lists)
• Child to Parent Communication
• Reacting to Data/State Changes
• Computed Properties vs useMemo
• Vue Slots vs Render Props

Component Structure

Let's take a bird's eye look into some very basic components in both frameworks. We will extend this in the following sections.

In Vue, a Single File Component contains 3 parts: the template, script and style.

The template is the part that will be rendered. It contains the HTML of the component and has access to the data (and methods) in the scripts and the styles.

You can find everything about a component inside these sections in Vue.

<template>
  <div id="structure">
    <h1>Hello from Vue</h1>
  </div>
</template>

<script>
export default {}
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#structure {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

To get this component rendered without a router or other complicated things, you can add it to App.vue. I suggest you render every component as you follow along so you can see them in action:

<template>
  <div id="app">
    <structure />
  </div>
</template>

<script>
import Structure from './Structure/Structure.vue'

export default {
  name: 'App',
  components: { Structure },
}
</script>

You will be changing the import component inside the components section and the tag name in the template section.

In React, a functional component is a function that returns JSX (an extension of JavaScript that allows you to use HTML tags inside JS code). You can think as if it is returning HTML to simplify things. The part that will be rendered used to be written inside the render() function in class-based React, if you are more familiar with that.

As you progress in this tutorial, in each section you can put the respective components inside App.js to get them rendered like this:

import React from 'react'

function Structure() {
  return <div>Render me App</div>
}

export default Structure

import './App.css'

import Structure from './Structure/Structure'

function App() {
  return (
    <div className="App">
      <Structure />
    </div>
  )
}

export default App

So you will change the import and the component inside the div.

How to Use State

In Vue, we learned that the script tag contains the data and methods related to the component. The Vue Options API has special keywords (options) such as data, methods, props, computed, watch, and mixins that we can use, as well as lifecycle methods such as created and mounted.

We will use the data option to use state in our component. The data should be defined as a function which returns an object that contains our states.

To access the state inside our HTML (template), we have to use double curly braces and write the name of our variable. Keep in mind that any change to data variables will result in a render if that variable is used (referenced) in the HTML.

<template>
  <div>
    <h1>Hello {{ currentFramework }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentFramework: ' Vue!',
      alternative: ' React!',
    }
  },
}
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style></style>

In React, functional components used to be stateless. But thanks to hooks, we now have the useState hook to store state inside our component. To use the useState hook we have to import it, and the syntax is:

import React, { useState } from 'react';


function App() {
    const [stateName, setStateName] = useState('default value'); 
}

We define the name of the state variable and name of its setter function inside the brackets, then we pass the default value of our variable to the useState hook.

You can imagine the hook like this to understand the syntax better: It is like a function that creates a variable, sets its value to the passed value, then returns an array which contains the variable and its setter function.

Note that you should use a single pair of curly parenthesis to switch to JavaScript scope and print a variable inside your JSX, instead of double parenthesis, which was the case with Vue.

import { React, useState } from 'react'

function TestUseState() {
  const [frameworkName, setFrameworkName] = useState('React')

  return (
    <div>
      <h1>useState API</h1>
      <p>Current Framework: {frameworkName}</p>
    </div>
  )
}

export default TestUseState

How to Use Props

In Vue, we define props by adding the props option inside the object we export inside the script field like we did with the data option. It is a best practice to define the props as objects so we get more control over how they are used.

For example, specify their types, default values, and make them required if necessary. Vue will show a warning if you use the component wrong, like calling it without passing a required prop.

Let's say we have an Address child component that will be called from the UserInfo parent component.

<template>
  <div class="address">
    <p>City: {{ city }}</p>
    <p>Street: {{ street }}</p>
    <p>House No: {{ houseNumber }}</p>
    <p>Postal Code: {{ postalCode }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    city: {
      type: String,
      default: 'Munich',
    },
    street: {
      type: String,
      required: true,
    },
    houseNumber: {
      type: Number,
      required: true,
    },
    postalCode: {
      type: Number,
      required: true,
    },
  },
}
</script>

<style></style>

We can access our props just like our data variables – using the double parenthesis inside the template. And we can pass the props from the parent like this:

<template>
  <div class="address">
    <p>Name: Yigit</p>
    <Address
      street="randomStrasse"
      :postalCode="80999"
      :houseNumber="32"
    ></Address>
  </div>
</template>

<script>
import Address from '@/components/Address.vue'

export default {
  data() {
    return {}
  },
  components: {
    Address,
  },
}
</script>

<style></style>

Notice how we use the v-bind shorthand : and write :postalCode and :houseNumber to indicate that these are not strings but Number type objects. We have to use this syntax whenever we need to pass anything other than a string (array, object, number, and so on).

This might confuse you if you are coming from React, so you might want to read more about v-bind to get a better understanding of how it works.

In React, we do not need to explicitly define what props will be passed in the child component. We can either use object destructuring to assign props to variables or access them using the props object. We access our props inside JSX, just like how we access the state.

import React from 'react'

function Address({ city, street, postalCode, houseNumber }) {
  return (
    <div>
      <p>City: {city}</p>
      <p>Street: {street}</p>
      <p>Postal Code: {postalCode}</p>
      <p>House Number: {houseNumber}</p>
    </div>
  )
}

export default Address

And we can pass the props from the parent like this:

import React from 'react'

function UserInfo() {
  return (
    <div>
      <p>Name: Yigit</p>
      <Address
        city="Istanbul"
        street="Ataturk Cad."
        postalCode="34840"
        houseNumber="92"
      ></Address>
    </div>
  )
}

export default UserInfo

How to Create Methods/Functions

In Vue, we define methods similarly to data – we can just put a methods option under the data and define the method. We can call these methods from the template and methods can access/modify our data.

<template>
  <div>
    {{ sayHello() }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      to: 'Methods',
    }
  },
  methods: {
    sayHello() {
      return 'Hello ' + this.to
    },
  },
}
</script>

<style></style>

Be careful when trying to access component methods or data properties from inside the exported object (code inside script tag). If you don't include the this keyword, Vue will show an error saying it does not know where that property/method is.

In React, things are a bit more simple. It is just the regular JS function definition, with ES6 syntax, if you'd like.

import React from 'react'

function HelloFunctions() {
  const to = 'Functions'

  function sayHello() {
    return 'Hello ' + to
  }

  const sayHelloModern = () => 'Hello ' + to

  return (
    <div>
      {sayHello()}
      <br />
      {sayHelloModern()}
    </div>
  )
}

export default HelloFunctions

Styling Options

Styling Vue components is really simple. We just need to write our plain old CSS classes and selectors inside the style tag.

Vue also supports scoped CSS by using the scoped keyword. It helps to avoid visual bugs caused by assigning the same class name inside different components. For example, you could name the main container in all your components main-container and only the styles in that component file would be applied to each main-container.

<template>
  <div class="main-container">
    <h3 class="label">I am a styled label</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style scoped>
.main-container {
  position: absolute;
  left: 50%;
  top: 45%;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
}

.label {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.5rem;
  text-transform: uppercase;
}
</style>

In React, though, we have more options in terms of styling and it's basically up to your personal preference since there are multiple ways to style your components. I will suggest a few good options here.

1) Writing regular CSS in a .css file and importing it

This is probably the most basic and straightforward approach for applying styles to your React components. It does not mean it is a bad approach, as it allows you to write plain old CSS. It is a good method if you are a CSS guru who is just getting started with React.

import React from 'react'
import './styles.css'

function Styled() {
  return (
    <div>
      <h3 class="title">I am red</h3>
    </div>
  )
}

export default Styled

.title {
  color: red;
  font-size: 30px;
}

2) Using Material UI (useStyles/makeStyles)

Material UI is a CSS framework that has so many reusable components. It also provides a way to style your components, which uses CSS in JS and therefore has its advantages such as scoped CSS.

The makeStyles hook receives a list of classes in an object, then you can use those classes by assigning them to objects.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

3) Using Styled Components (CSS in JS)

Styled components are modern and easy to use and it allows you to take advantage of all the features of plain CSS as well.

In my opinion, it is easier to use and more powerful than MaterialUI (you can also style MaterialUI components with this, instead of using makeStyles). It's also better than importing a CSS file since it is scoped and styled components are reusable.

import React from 'react'
import styled, { css } from 'styled-components'

// Use Title and Wrapper like any other React component – except they're styled!
const Title = styled.h1`
  font-size: 2em;
  text-align: center;
  color: palevioletred;
`

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
  height: 100vh;
`

function StyledComponent() {
  return (
    <Wrapper>
      <Title>Hello World!</Title>
    </Wrapper>
  )
}

export default StyledComponent

How to Bind Form Input to Data (State)

We have learned how to have state inside our components but we also need a way to bind user inputs to that state. For example in login forms, we will probably need to store the user's username and password input in the component state. React and Vue have different ways of keeping user inputs in sync with state.

In Vue we have a special directive for this operation called v-model. To use this, you need to create a state by using the data property as we have learned before. Then you add the v-model keyword to your input and specify which data variable is responsible for storing this input (this is applicable to form input, textarea and select elements).

This is a high-level and clean way to connect data, removing the need to create additional lambda functions or handlers.

<template>
  <div>
    <input v-model="inputState" type="text" />
    <br />
    {{ inputState }}
    <br />
    <button @click="changeInputState()">Click to say goodbye</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputState: 'Hello',
    }
  },
  methods: {
    changeInputState: function () {
      this.inputState = 'Goodbye'
    },
  },
}
</script>

<style></style>

Here is a small example: we have a text input, and we connect it to the inputState variable by using the v-model keyword. So whenever the user inputs text, the inputState variable will reflect the changes automatically.

However, there is one special thing that you need to know: v-model implements 2-way data binding in contrast to 1-way binding in React.

This means that, not only when you change the input does the data change, but also, if you change the data, the input value changes as well.

To demonstrate this, I have created a button and connected it to a method. Don't worry about the event handling yet, we will see that in next section. When the button is clicked, the value of inputState variable is changed and the input also changes when that happens.

I encourage you to try it yourself by running the code. Also, notice that the initial value of your input box is 'Hello' – it is not initialized to empty string or null because we set the inputState variable to 'Hello'.

Now let's see it in React:

import { React, useState } from 'react'

function FormInputBinding() {
  const [userInput, setUserInput] = useState('Hello')

  return (
    <div>
      <input type="text" onChange={(e) => setUserInput(e.target.value)} />
      <button onClick={() => setUserInput('Goodbye')}>
        Click to say goodbye
      </button>
      {userInput}
    </div>
  )
}

export default FormInputBinding

This topic overlaps with handling user events so if you do not understand something, wait until you complete the next section. Here, we handle the onChange event manually and call the setUserInput function to set the state to the event's value.

As we mentioned earlier, React uses a 1-way binding model. This means that changing the userInput state will not affect the value we see inside the text input – we won't see Hello inside the input box initially. Also when we click the button, it will update the state but the input inside the box will maintain its value.

Handling Events (User Input)

Let's see another form that is closer to real-life cases in Vue and React:

<template>
  <div>
    <input
      v-model="username"
      id="outlined-basic"
      label="Username"
      variant="outlined"
    />
    <input
      v-model="password"
      id="outlined-basic"
      type="password"
      label="Password"
      variant="outlined"
    />

    <input
      v-model="termsAccepted"
      id="outlined-basic"
      type="checkbox"
      label="Password"
      variant="outlined"
    />

    <Button variant="contained" color="primary" @click="submitForm">
      Submit
    </Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      termsAccepted: false,
    }
  },
  methods: {
    submitForm: function () {
      console.log(this.username, this.password, this.termsAccepted)
    },
  },
}
</script>

<style></style>

As you can see, we are using the v-model property that we just learned about to connect all our inputs to data properties (state). So, whenever the inputs change, Vue automatically updates the corresponding variable.

To see how we handle a click event on button, check the submit Button. We use the v-on keyword to handle click event. @click is just a shorthand for v-on:click.

Whenever a click event happens it simply calls the submitForm method. You can familiarize yourself with the list of possible events by going through the linked docs.

In React, we can have a form like this:

import { React, useState } from 'react'

import {
  TextField,
  Checkbox,
  FormControlLabel,
  Button,
} from '@material-ui/core'

function EventHandling() {
  let [username, setUsername] = useState('')
  let [password, setPassword] = useState('')
  let [termsAccepted, setTermsAccepted] = useState(false)

  const submitForm = () => {
    console.log(username, password, termsAccepted)
  }

  const formContainer = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '20px',
  }

  return (
    <div style={formContainer}>
      <TextField
        onInput={(e) => setUsername(e.target.value)}
        id="outlined-basic"
        label="Username"
        variant="outlined"
      />
      <TextField
        onInput={(e) => setPassword(e.target.value)}
        id="outlined-basic"
        type="password"
        label="Password"
        variant="outlined"
      />

      <FormControlLabel
        control={
          <Checkbox
            type="checkbox"
            checked={termsAccepted}
            onChange={(e) => setTermsAccepted(e.target.checked)}
          />
        }
        label="Accept terms and conditions"
      />

      <Button variant="contained" color="primary" onClick={() => submitForm()}>
        Submit
      </Button>
    </div>
  )
}

export default EventHandling

We create our state variables for each input. We can then listen to events on inputs and the event will be accessible inside the handler function. We call the state setters to update our state as a response to these events.

Conditional Styling

Conditional Styling means binding a class or style to an element if a condition is true.

In Vue it can be achieved like this:

<template>
  <div>
    <button @click="toggleApplyStyles"></button>
    <p :class="{ textStyle: stylesApplied }">
      Click the button to {{ stylesApplied ? 'unstyle' : 'style' }} me
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stylesApplied: false,
    }
  },
  methods: {
    toggleApplyStyles: function () {
      this.stylesApplied = !this.stylesApplied
    },
  },
}
</script>

<style>
.textStyle {
  font-size: 25px;
  color: red;
  letter-spacing: 120%;
}
</style>

We create a paragraph and want to apply the textStyle class only when the stylesApplied data property's value is true. We can use v-bind to achieve this. The colon is the shorthand for v-bind so :class is same as v-bind:class.

We use v-bind object syntax to bind classes. We pass an object to the class property: {textStyle: stylesApplied}, which means apply the textStyle class if stylesApplied is true.

It is a bit complicated at the start but it helps us avoid multiple chained if statements to determine which class will be applied and handles style bindings in a clean way: class names on the left (object keys), conditions on the right (object values).

In React we have to do things more primitively.

import { React, useState } from 'react'
import './styles.css'

function ConditionalStyling() {
  let [stylesApplied, setStylesApplied] = useState(false)

  return (
    <div>
      <button onClick={() => setStylesApplied(!stylesApplied)}>Click me</button>
      <p style={{ color: stylesApplied ? 'red' : 'green' }}>Red or Green</p>
      <p className={stylesApplied ? 'styleClass' : ''}>Red with class</p>
    </div>
  )
}

export default ConditionalStyling

Here we use plain JavaScript to bind either a styles object or a class name to the element. I think this complicates the code a bit, and I'm not a huge fan of this syntax.

Conditional Rendering

Sometimes, we want to render a component after some operation – such as fetching data from an API – is completed. Or maybe we want to display an error message if there is an error or success message if not.

For such situations, we use conditional rendering to change the HTML to be rendered programmatically.

In Vue, there are special directives for that as well. We can use the v-if and v-else or even v-else-if for rendering templates based on conditions.

<template>
  <div>
    <h2 v-if="condition1">condition1 is true</h2>
    <h2 v-else-if="condition2">condition2 is true</h2>
    <h2 v-else>all conditions are false</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition1: false,
      condition2: false,
    }
  },
}
</script>

<style></style>

This syntax allows us to create complex chains of conditional rendering without complicating our template code with if else statements.

Here is one of the ways to accomplish the same output with React:

import React from 'react'

function ConditionalRendering() {
  const condition1 = false
  const condition2 = false

  function getMessage() {
    let message = ''

    if (condition1) {
      message = 'condition1 is true'
    } else if (condition2) {
      message = 'condition2 is true'
    } else {
      message = 'all conditions are false'
    }

    return <h1>{message}</h1>
  }

  return <>{getMessage()}</>
}

export default ConditionalRendering

This is just plain JS and JSX, no magic here.

Rendering Arrays (Lists)

Now let's see how we can render list data. In Vue, there is v-for keyword for doing this. The syntax name in names means the name variable will always hold the current name. As the index changes, if index is 0, it is names[0] and so on. We can also access the index as specifying it inside the parentheses. The v-for directive also requires a key.

<template>
  <div>
    <h1>Names</h1>
    <ul>
      <li v-for="(person, index) in people" :key="index">{{ person.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        {
          id: 0,
          name: 'Yigit',
        },
        {
          id: 1,
          name: 'Gulbike',
        },
        {
          id: 2,
          name: 'Mete',
        },
        {
          id: 3,
          name: 'Jason',
        },
        {
          id: 4,
          name: 'Matt',
        },
        {
          id: 5,
          name: 'Corey',
        },
      ],
    }
  },
}
</script>

Note that we can also use the v-for directive for iterating over properties of an object. Remember that, in JS, arrays are just a special subset of objects with number keys.

In React, we will use the Arrays.map function to iterate over the array and return a JSX tag for each element.

import React from 'react'

function RenderingLists() {
  const cities = [
    'Istanbul',
    'München',
    'Los Angeles',
    'London',
    'San Francisco',
  ]

  return (
    <div>
      <h1>Cities</h1>
      {cities.map((city, index) => (
        <h4 key={index}>{city}</h4>
      ))}
    </div>
  )
}

export default RenderingLists

Child to Parent Communication

Imagine you have a form component and a button sub-component inside it. And you want to perform some action when that button is clicked, like calling an API to submit data – but you do not have access to the form data in the button component since it is stored in the parent. What do you do?

Well, if you are in Vue, you want to emit a custom event from the child and act on that in the parent. In React, you would create the function that will be executed (when button is clicked) in the parent, where the function has access to form data and pass it to the button component so that it can call the parent's function.

Let's see an example in Vue:

<template>
  <div>
    <button @click="buttonClicked">Submit</button>
  </div>
</template>

<script>
export default {
  methods: {
    buttonClicked: function () {
      this.$emit('buttonClicked') // Emits a buttonClicked event to parent
    },
  },
}
</script>

<style></style>

In our child component, we have the button and on click we emit a buttonClicked event. We could also send data in this call. For example if this was a text input box instead of a button and had its own data, we could send that data to the parent with emit.

In the parent component, we need to listen for the custom buttonClicked event that we just created.

<template>
  <form action="#">
    <input v-model="username" type="text" />
    <child @buttonClicked="handleButtonClicked" />
  </form>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return {
      username: '',
    }
  },
  methods: {
    handleButtonClicked: function () {
      console.log(this.username)
    },
  },
}
</script>

<style></style>

We just added a @buttonClicked event to our child component call to handle this custom event.

In React, we could achieve the same results by passing a handler function to the child component. The concept was a bit complicated to me first but the syntax is easier than the Vue example and there is no magic.

import React from 'react'

function Child({ handleButtonClicked }) {
  return (
    <div>
      <button onClick={() => handleButtonClicked()}>Submit</button>
    </div>
  )
}

export default Child

We access the handleButtonClicked prop and call it when the button is clicked.

import { React, useState } from 'react'

import Child from './Child.js'

function Parent() {
  const [username, setUsername] = useState('')

  const submitForm = () => {
    console.log(username)
    // Post form data to api...
  }

  return (
    <div>
      <input onChange={(e) => setUsername(e.target.value)} type="text" />
      <Child handleButtonClicked={submitForm} />
    </div>
  )
}

export default Parent

In the parent, we pass the submitForm function as the handleButtonClicked prop which will do the job.

Reacting to Data/State Changes

In some cases, we need to react to data changes. For example, when you want to perform asynchronous or expensive operations in response to a change in data.

In Vue, we have watch properties or watchers for that. If you are familiar with useEffect in React, this is closest thing you can find in Vue and their use cases are more or less the same.

Let's see an example:

<template>
  <div>
    <input v-model="number1" type="number" name="number 1" />
    <input v-model="number2" type="number" name="number 2" />
    {{ sum }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      number1: 0,
      number2: 0,
      sum: 0,
    }
  },
  watch: {
    number1: function (val) {
      this.sum = parseInt(val) + parseInt(this.number2)
    },
    number2: function (val) {
      this.sum = parseInt(this.number1) + parseInt(val)
    },
  },
}
</script>

<style></style>

Here, we have number1 and number2 defined in our data properties. We have 2 respective inputs and we are printing the sum of those numbers and we want sum to update when any of the inputs change.

Inside the watch property, we write the name of the variable we want to watch. In this case, we want to watch both number1 and number2. If the user enters an input, v-model will change the corresponding data variable and when that happens, the watch function for that variable will be triggered and the value of sum will be recalculated.

Note that, in a real application, you wouldn't need to use watch for this simple thing and you would just put sum inside computed instead. This is a made-up example to demonstrate how watch works.

Before using watch with more complicated things like objects, arrays, and nested structures, I suggest reading this article because you will probably need to learn some watch options like deep and immediate.

In React, we use the built-in useEffect hook to watch for changes.

import { React, useState, useEffect } from 'react'

function ReactToDataChanges() {
  const [number1, setNumber1] = useState(0)
  const [number2, setNumber2] = useState(0)
  const [sum, setSum] = useState(0)

  useEffect(() => {
    console.log('I am here!')
    setSum(parseInt(number1) + parseInt(number2))
  }, [number1, number2])

  return (
    <div>
      <input
        onChange={(e) => setNumber1(e.target.value)}
        type="number"
        name="number 1"
      />
      <input
        onChange={(e) => setNumber2(e.target.value)}
        type="number"
        name="number 2"
      />
      {sum}
    </div>
  )
}

export default ReactToDataChanges

useEffect expects a function to run when a dependency changes as the first argument and a list of dependencies as the second argument.

Keep in mind that this is also a made-up example to demonstrate useEffect (we could achieve the same without useEffect by taking the sum variable out of state).

I want to show a very common use case for this hook: fetching data from an API after the component loads:

useEffect(() => {
    fetchUserData()
}, [])

const fetchUserData = async () => {
    const url = '';
    const response = await axios.get(url);
    const user = response.data;
    setUser(user);
}

We can specify empty array to run the useEffect once when the component renders. In Vue, we would do the same operation inside a lifecycle hook, such as created or mounted.

Computed Properties vs useMemo

Vue has a concept called computed properties, which serve the purpose of caching rather complex computations and re-evaluating their values whenever one of the dependencies change (similar to watch).

It is also useful in keeping our templates clean and concise by moving the logic to JavaScript. In this case, they act like regular variables which we don't want to be a state.

<template>
  <div>
    <h3>Yigit's Favorite Cities are:</h3>
    <p v-for="city in favCities" :key="city">{{ city }}</p>
    <h3>Yigit's Favorite Cities in US are:</h3>
    <p v-for="town in favCitiesInUS" :key="town">{{ town }}</p>
    <button @click="addBostonToFavCities">
      Why is Boston not in there? Click to add
    </button>
  </div>
</template>

<script>
export default {
  computed: {
    favCitiesInUS: function () {
      return this.favCities.filter((city) => this.usCities.includes(city))
    },
  },
  data() {
    return {
      favCities: [
        'Istanbul',
        'München',
        'Los Angeles',
        'Rome',
        'Florence',
        'London',
        'San Francisco',
      ],
      usCities: [
        'New York',
        'Los Angeles',
        'Chicago',
        'Houston',
        'Phoenix',
        'Arizona',
        'San Francisco',
        'Boston',
      ],
    }
  },
  methods: {
    addBostonToFavCities() {
      if (this.favCities.includes('Boston')) return

      this.favCities.push('Boston')
    },
  },
}
</script>

<style></style>

Here, we do not want to put the favCitiesInUS function inside our template because it is too much logic.

Think of it like a function where the output will be cached. The function will be re-evaluated only if favCities or usCities (its dependencies) changes. To try that, you can click the button and see how the template changes. Keep in mind that computed functions do not receive any arguments.

We can use the useMemo hook to achieve the same result in React. We wrap the function in the useMemo hook and provide the list of dependencies in the second argument. Whenever one of those dependencies changes, React will run the function again.

import { React, useMemo, useState } from 'react'

function UseMemoTest() {
  const [favCities, setFavCities] = useState([
      'Istanbul',
      'München',
      'Los Angeles',
      'Rome',
      'Florence',
      'London',
      'San Francisco',
    ]),
    [usCities, setUsCities] = useState([
      'New York',
      'Los Angeles',
      'Chicago',
      'Houston',
      'Phoenix',
      'Arizona',
      'San Francisco',
      'Boston',
    ])

  const favCitiesInUs = useMemo(() => {
    return favCities.filter((city) => usCities.includes(city))
  }, [favCities, usCities])

  return (
    <div>
      <h3>Yigit's Favorite Cities are:</h3>
      {favCities.map((city) => (
        <p key={city}>{city}</p>
      ))}
      <h3>Yigit's Favorite Cities in US are:</h3>
      {favCitiesInUs.map((town) => (
        <p key={town}>{town}</p>
      ))}
      <button onClick={() => setFavCities([...favCities, 'Boston'])}>
        Click me to add
      </button>
    </div>
  )
}

export default UseMemoTest

Vue Slots vs Render Props

We sometimes want to create generic components that can display other components inside of them, such as a grid component that displays any type of item inside it.

For that purpose, Vue has a mechanism called slots. The logic behind slots is really simple: you open a slot in the component which should receive another component to render (let's call it consumer, because it consumes the elements that are provided).

In the producer, you pass the components that consumer should render inside its tags – you can think of them as filling the slots you opened in the consumer. The first element will be rendered in the first slot, the second in the second slot, and so on.

If there is more than one slot, you have to set the names as well. Let's see an example:

<template>
  <div>
    <h3>Component in slot 1:</h3>
    <slot name="slot1"></slot>
    <h3>Hello slot1</h3>
    <slot name="slot2"></slot>
    <h3>Component in slot 3:</h3>
    <slot name="slot3"></slot>
  </div>
</template>

<script>
export default {}
</script>

<style></style>

Here is our consumer component. It may be creating a layout or some composition from multiple components. We create the slots and give them distinct names.

<template>
  <div>
    <consumer>
      <custom-button
        text="I am a button in slot 1"
        slot="slot1"
      ></custom-button>
      <h1 slot="slot2">I am in slot 2, yayyy</h1>
      <custom-button text="I am in slot 3" slot="slot3"></custom-button>
    </consumer>
  </div>
</template>

<script>
import CustomButton from './CustomButton.vue'
import Consumer from './Consumer.vue'

export default {
  components: {
    CustomButton,
    Consumer,
  },
}
</script>

<style></style>

And here is the producer passing the components to the slots of consumer by specifying their slot name as an attribute.

And here is the simple CustomButton component if you are interested in that:

<template>
  <button>{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'I am a button component',
    },
  },
}
</script>

<style></style>

Can you guess the output without running the code? That might be a good exercise to make sure you understand slots.

In React, it is much simpler. I think the slots overcomplicate things a lot. As React uses JSX, we can just get away with passing the component to be rendered as a prop.

import React from 'react'
import Child from './Child'

function Parent() {
  const compToBeRendered = (
    <div>
      <h1>Hello</h1>
      <button>Im button</button>
    </div>
  )

  return (
    <div>
      <Child compToBeRendered={compToBeRendered}></Child>
    </div>
  )
}

export default Parent

import React from 'react'

function Child({ compToBeRendered }) {
  return (
    <div>
      <h1>In child:</h1>
      {compToBeRendered}
    </div>
  )
}

export default Child

Final Thoughts

In this last section of the article, I would like to share my two cents on these frameworks.

As we have seen through the article, Vue usually has its own way of doing things and has different constructs for most things. Sometimes this makes it a bit harder to get started with in my opinion.

On the other hand, React is like pure JS, blended with JSX: not much magic and not many special keywords to learn.

Although it may be not be the most beginner-friendly framework, I believe that the abstractions/keywords Vue provides (such as v-for, v-if and the Options API) allow you to write code at a higher level of abstraction (think of adding a simple statement to iterate over components versus a low level, multi-line map function).

These features also make your Vue code more structured and clean because the framework is opinionated. So it has its own ways of doing things, and if you do things that way, you will end up with code that is easy to read and understand.

React, on the other hand, is not very opinionated about things and provides developers with a lot of freedom to decide the structure of their project themselves.

But this freedom comes with a cost: if you are a beginner who is not aware of best practices, it is easy to end up with messy code and a poorly structured project.

Another important difference in my opinion is this: if you are going to build a non-fundamental project with React, you will need to use a lot of external libraries to develop at a normal speed, which means you will need to learn how those things work as well.

Conclusion

Thank you for reading and I hope this comparison was useful. If you would like to connect, ask questions, or discuss further, feel free to send me a message on LinkedIn.

The answer to this question is essential for any React developer, regardless of their skill level. This is because it indicates what they must know and how they must work in developing any React application.

Whether you are a new or an advanced React developer, I hope this thoughtful analysis will improve your own development process as you build your next React project.

Why is React a library and not a framework?

React was made to build full-fledged web applications. As a result, it's often compared with other tools that developers use to build apps, like Angular, Vue, and Svelte.

React is written in JavaScript and is used to make better JavaScript applications. We refer to React specifically as a library.

But what makes React a library and not a framework?

The reason becomes clear when we look at other similar tools that are used to create complete web applications.

Let's look at a project like Angular, which shares the same purpose as React (to create single-page web apps). What sets it apart is the fact that when you set up an Angular project, it is bootstrapped with nearly every single thing that you'll need to make a complete, large-scale app.

Many developers like to refer to frameworks or similar solutions as having "batteries included."

Frameworks are a common choice for companies and anyone looking to make enterprise JavaScript applications, because they include resources that a large-scale application would likely need. This includes built-in tools for common tasks like creating forms, running automated tests, making network requests, and much more.

In short, everything that you need to make a complete application is included in your Angular project when it's generated. But that is not the case with React.

React is fundamentally "unopinionated"

While popular tools have emerged like Create React App, which allow you to create a complete React project in a single command, React is often referred to as "unopinionated."

What does it mean for React to be unopinionated?

The React and React DOM libraries give us the means of building a user interface with the JSX syntax, plus powerful state management tools via hooks, among other things.

However, React itself does not include many of the React-specific libraries you're going to need for most projects. Angular and Vue, by comparison, include many more tools all bundled within the core package itself.

Many developers consider this discussion of what is and isn't a library to be trivial. But it has real consequences for our development process. In other words, because React is a library and not a framework, becoming a skilled React developer entails having a good knowledge of third-party React libraries.

Since React is a library, you must choose the tools on your own

That means, in order to build complete React applications, you will need to choose these packages and tools on your own.

Here are a few examples of decisions that I often need to make when I'm building a React application myself:

For a form library, I have to decide whether I want to use the package React Hook Form or Formik. These are both React-specific form libraries to add important features to our forms like validation.

For testing my React application, I might use either React Testing Library, Jest, or some combination of the two.

For making network requests, I might need to choose between the Fetch API and Axios. I might also need to decide if I want to add an additional library to make managing my server state easier, such as React Query or SWR.

The tools you choose depend on your app and knowledge of them

This question of whether React is a library or framework is important because any React developer must know what their choices are and which choice to make given the type of React application they're building.

If you're building an app without many forms, you might not need a form library at all. If you're more confident with the Fetch API, you might use that over something like Axios.

It really depends not only on what the demands of the app are, but also on what your preferences are as a developer. This is arguably an advantage that React has as a library and why I believe it's very popular among newer developers. It doesn't lock you into one choice or hold you to any specific libraries other than React itself.

You're able to make your own decisions, and you're able to have more freedom overall, as a developer.

That being said, even though React is not a framework this does not diminish its presence in the corporate realm. It's still used to build complex and impressive applications of all kinds. There are many lists of the large-scale React applications that businesses have made and which you likely use on a daily basis.

You need to keep up with emerging libraries

If we were talking about which form library to choose two years ago, I would likely have included Redux Form. As for a data fetching library, I couldn't have mentioned React Query or SWR, because they weren't created (or hadn't gained much traction), until the last year or so.

Because React apps are often reliant upon third-party libraries, newer libraries come about that improve upon the old ones. Individual developers and teams transition to different tools to get the job done and the ecosystem changes as a whole.

Like it or not, React being a library and not a framework entails a large, shifting network of other libraries we must be aware of to build our projects. Some of which may fall out of favor and be replaced by others or may become deprecated and no longer supported as open-source projects.

In short, React being a library may require us to pay more attention to what is going on around React, as compared to if it was a framework.

Wish React was a framework? There are many!

It's worth noting that there are frameworks out there that are based upon React.

While React itself is just a library, many React-based frameworks have cropped up in recent years to provide developers with a more powerful set of built-in tools. These allow you to build projects faster without needing as many third-party libraries.

Some of the most popular of these frameworks include Next.js, Gatsby, and Redwood.js, all of which are used to create full-scale dynamic and static React applications.

This is, in my opinion, the great advantage of frameworks – you do not have to make as many choices throughout the development process.

Use React's flexibility to your advantage

Be aware that going forward, there is a robust ecosystem of React-focused libraries that you can add to your React project to achieve whatever you're looking for, from the most general tasks to the most specific.

This is thanks to React's popularity and widespread usage. But also note, especially if you're coming from an opinionated framework like Angular or Vue, that there are many React-based frameworks that you can rely upon and learn about to build equally functional and featureful applications as well.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

If you are new to React.js, you must be wondering why it is so popular and why you should use it in your applications. If so, then you are in the right place.

Let's discuss what makes React.js so great and why you should use it in your projects.

Table of Contents

• A Brief History of React.js
• Why Should You USe React?
• React is Flexible
• React Has a Great Developer Experience
• React Has Facebook's Support/Resources
• React Also Has Broader Community Support
• React Has Great Performance
• React is Easy to Test

A Brief History of React.js

Facebook created React.js in 2011 for their own use. As you know, Facebook is one of the biggest Social Networking websites in the world today.

In 2012, Instagram also started using it, which is a subsidiary of Facebook.

In 2013, Facebook made React.js open-sourced. Initially, the developer community rejected it because it used Markup and JavaScript in a single file. But as more people experimented with it, they started embracing the component-centric approach for separating concerns.

In 2014, many large companies started using React.js in their production environments.

In 2015, Facebook open-sourced React Native too. It is a library that allows us to create native mobile apps in Android and iOS using React.js.

In 2016, with version 15, React.js started using Semantic Versioning. This also helped convey to the developer's community that React was more stable.

Today, React.js is used by many Fortune 500 companies. Facebook has full-time React development staff. They regularly release bug fixes, enhancements, blog posts, and documentation.

Why Should You Use React?

You must be wondering why you should use React.js. After all, as the uses of JavaScript have increased in recent years, we now have multiple options available in the market like Angular and Vue.js. So, why React?

Let's explore six key reasons to use React.js.

React is Flexible

React is remarkably flexible. Once you have learned it, you can use it on a vast variety of platforms to build quality user interfaces. React is a library, NOT a framework. Its library approach has allowed React to evolve into such a remarkable tool.

React was created with a single focus: to create components for web applications. A React component can be anything in your web application like a Button, Text, Label, or Grid.

But as React's popularity is grown, its ecosystem has also grown to cover various use cases.

You can generate a static site with React using tools like Gatsby. You can use React Native to build mobile apps. You can even create Desktop applications using a tool like Electron, which can run on mac and windows with React.js technology.

React also supports server rendering of its components using tools like Next.js. You can also use React.js to create a virtual reality website and 360 experiences using React VR.

"Learn React Once and Write Everywhere" - Reactjs.org

You can use React in your existing apps too. React was designed keeping this in mind. You can change a small part of your existing application by using React, and if that change works, then you can start converting your whole application into React.js. Facebook used the same approach.

"The main advantage of using a Library over a Framework is that Libraries are lightweight, and there is a freedom to choose different tools. The Framework consists of an entire ecosystem to build an application, and you don't have an easy way to use any other tools outside the Framework."

React Has a Great Developer Experience

Your team will fall in love with React when they start coding in it. Rapid development and React's small API combined creates a fantastic developer experience.

React's API is very simple to learn. It has very few concepts to learn. Here is a small example of a React Component:

React Component

You just need to import the React library. Message is the component that accepts props (input) and returns JSX.

JSX is a special syntax that looks like HTML, which converts React's API calls and finally renders HTML.

Traditional frameworks like Angular and Vue power up the HTML. They use JavaScript inside HTML. They have created HTML attributes that give extra capabilities to it.

The main problem with this approach is that you have to learn those new HTML attributes or always keep looking at the official documentation.

Here's an example of looping in Angular. Look at the *ngFor attribute:

Angular Loops Example (Source : Angular)

And here's an example of looping in Vue.js. Look at the v-for attribute:

Vue Loops Example (Source : vuejs.org)

React uses the opposite approach. It uses HTML (JSX) inside JavaScript. I like this approach because here, you can deal with pure JavaScript and HTML.

Here's an example of looping in React.js

React Loops Example (Source : Reactjs.org)

The React component NumberList is using pure JavaScript code (the map function). Also, you can see that JSX is a simple well-known HTML tag with no fancy attributes. The render function is simply rendering the NumberList component in the root element in the HTML file.

What else you need as a developer if you have the platform where you can deal with pure JavaScript and HTML and still build an interactive UI?

Note: When I say "pure JavaScript" that doesn't mean you will use vanilla JavaScript in React. React is a JavaScript Library, and it has its layer on top of the Javascript. BUT, as I said, the React API is very small and simple to learn. Angular & Vue force their rules on you. React is more conceptual. It shows you how you can make better use of vanilla JavaScript in the React way.

React.js also gives us the create-react-app package, which allows you to start development instantly.

React Has Facebook's Support/Resources

React is heavily used in the Facebook app, website, and in Instagram. That's why Facebook is deeply committed to it. They use over 50k React components in their production environment. The top four React contributors on GitHub are full-time Facebook employees.

Top React.js Contributors

Also, the React team maintains a blog that consistently gives you details for each release.

Because of the deep commitment by Facebook to React in production, when breaking change occur in React, Facebook consistently provides Codemod that automates the change.

Codemod is the command-line tool that automates changes to your codebase. When a new specification comes into React, Codemod automatically replaces older components with the newer specification.

React Has Broader Community Support, Too

Since 2015, React's popularity has grown steadily. It has a massive active community and its GitHub Repository has over 164k Stars. It is one of the Top 5 Repositories on GitHub.

React Git Repository.

React's NPM package has millions of weekly downloads as well.

Over 9K companies reported on Stackshare that they are using React. You can even see Fortune 500 companies.

Companies Using React

Reactiflux is a community specially made for React Developers. Over 110k community members are involved in helping solve and share React-related problems.

One of the most popular websites among software developers is StackOverflow. You can see that there are over 250k questions asked about React and related libraries.

React on Stackoverflow

In some cases, you don't even need to create your components. There are lots of free and mature component libraries already available online.

Here are some examples:

• Microsoft has created the Fluent UI component library that gives you a chance to develop your UI (resembles office).
• Material-UI offers React components that implement Google's Material UI guidelines.
• React-Bootstrap contains React components that make it easy to work with Bootstrap.
• Also, check the Awesome React Components list on GitHub to find more React components.

There are also mature related projects/libraries that you can use with React.

• If you want routing, then go for React Router. If you want to manage a more complex data system, then use Redux and MobX.
• For automated testing, use Jest, which is also from Facebook.
• For RESTful API calls, use GraphQL.
• For the server-side rendering of React components with node, use Express.js.

All these libraries and tools are important, because if you are looking to build something in React, you will find tons of help and solutions on the web for everything.

React Has Great Performance

The React team realized that JavaScript is fast, but updating the DOM makes it slow. React minimizes DOM changes. And it has figured out the most efficient and intelligent way to update DOM.

Before React, most frameworks and libraries would update the DOM unintelligently to reflect a new state. This resulted in changes to a significant portion of the page.

React monitors the values of each component's state with the Virtual DOM. When a component's state changes, React compares the existing DOM state with what the new DOM should look like. After that, it finds the least expensive way to update the DOM.

This doesn't seem very easy, but React handles it very well behind the scenes. It has multiple benefits like avoiding layout trashing, which is when the browser has to re-calculate the position of everything when the DOM element changes.

Also, since most applications are being used on mobile devices they need to be highly efficient. So, saving battery and CPU power is very important.

React's simple programming model allows it to change state automatically when data gets updated. This happens in the memory, so it is speedy.

React's library size is also tiny. It is less than 6kb (less than 3kb when gzipped). This is significantly smaller than its competitors.

React is Easy to Test

React's design is very user friendly for testing.

• Traditional UI browser testing is a hassle to setup. On the other hand, you require very little or no configuration for testing in React.
• Traditional UI browser requires browsers for testing, but you can test React components quickly and easily using the node command-line.
• Traditional UI browser testing is slow. But command-line testing is fast, and you can run a considerable amount of test suites at a time.
• Traditional UI browser testing is often time consuming and challenging to maintain. React test can be written quickly using tools like Jest & Enzyme.

There are wide variety of JavaScript testing frameworks available on the web that you can use to test React.js (since it's also a JavaScript library). Some popular testing frameworks are Mocha, Jasmine, Tape, QUnit, and AVA.

Conclusion

React is an excellent tool with which to create interactive applications for mobile, web, and other platforms.

React's popularity and usage are increasing day by day for good reason. As a developer, coding in React makes you better at JavaScript, a language that holds nearly 90% of the web development share today.

Thank You for reading this article. Connect me on LinkedIn and read more about Web Development on my Blog.

It took me a considerable amount of time to figure out how facades work, and I'm writing this to help anyone who is having trouble wrapping their heads around the concept.

In this article we'll cover what facades are, how they're used in Laravel, how you can build your own simple facade, and more.

What is a facade? And what is a wrapper?

A facade in Laravel is a wrapper around a non-static function that turns it into a static function.

The word "wrapper" can also be used when describing design patterns. Wrapping an object to provide a simplified interface to it is often described as the "facade" pattern.

So in short, the wrapper is the facade.

Before diving deeper into facades, it's important to understand what static and non-static functions are in PHP.

Static Methods

In Static methods we're not required to create an instance of a class to reference it. Static methods use double colons (::) when accessing properties or methods of a class:

<?php
class Calc {
    const GOLDEN_RATIO = '1.618';
}

echo Calc::GOLDEN_RATIO;  //1.618

Reserved keywords like self , static and parents is used to reference properties or methods within a class:

<?php
class backend {
    private const language = "php";
    public static function language() {
        echo self::language;
      }
}

backend::language();  //php

Non-static Methods

Non-static methods require that a given class be instantiated. In other words, they require an instance of the class to execute:

<?php
class backend{

    public function language($name){

        echo $name;
    }

}


$test = new backend; //creating an instance of the class

$test->language('php'); //php

Now that we've gone over static and non-static methods, we can dive deeper into facades in Laravel.

Laravel facades

In the vendors > laravel > framework > src > illuminate > support > Facades directory, there's a list of files which are the various facades that ship with Laravel by default.

Here's a screenshot of what the directory structure actually looks like in our editor:

Let's use the working code from Log.php to examine facades in more detail – the same explanation should apply to all facades in any Laravel application.

Laravel's Log facade

Here's the code for Laravel's Log facade:

<?php

namespace Illuminate\Support\Facades;

class Log extends Facade
{
    /**
     * Get the registered name of the component.
     *
     * @return string
     */
    protected static function getFacadeAccessor()
    {
        return 'log';
    }
}

Log is a class that extends the base facade which is from the namespace above.

Within the Log class we have a protected access modifier, getFacadeAccessor, and what that method does is it just returns log.

The name of this facade, log, is being returned so we can access the named facade anywhere within the Laravel application without initializing it. So we can do something like Log::info('hello there'); anywhere really easily.

As you can see, facades make code easier to read, more organized, and make testing 10 times easier.

Since learning about Log from one of my co-workers, it's been my favorite debugging tool.

How to create a facade in Laravel

In this section we'll implement our own facade. The main objective here is to help learners understand how Laravel facades work.

We'll do this by creating a StudentFacade which will extend properties from a base Facade that returns a name property after it has been resolved. This name property will be of type string and it will be returned each time we instantiate the class as shown below:

Curious how we will achieve this? Follow along as I'll be walking you through the steps.

We won't be creating our facade using the normal Laravel convention where we have a .php file in app > facade and then another in the providers before we end up registering it in the config > app.

Instead, we will make do with the web.php inside the routes for this illustration since we're just trying to see how facades work under the hood in a typical Laravel application.

First, let's start with this in web.php:

<?php 
class Student{
    public function students(){
        return 'Sean';
    }
}

 app()->bind('student', function(){
     return new Student;   
 });

We've created a class Student, and inside it we have a non-static students method that returns an array of students.

Then we call the bind method to make it always instantiate new Student so we don't need to do this manually anymore.

Next, let's create a base Facade class still within the same web.php:

 class Facade{
    public static function __callStatic($name, $args){
        return app()->make(static::getFacadeAccessor())->$name();
    }

    protected static function getFacadeAccessor(){
        //override take place 
    }
}

Any facade we might create later will be extending the properties of this base facade.

Within the Facade class we have a __callStatic magic method that helps us resolve the static::getFacadeAccessor() from the container with app()->make(). And with those we're able to access the $name property.

class StudentFacade extends Facade {
    protected static function getFacadeAccessor(){
        return 'student';
    }
}

Here, StudentFacade inherits the properties of the base facade. Then we override getFacadeAccessor() and set the return value to be whatever we have each time we instantiate in the bind above student.

StudentFacade::students(); //output "Sean"

When we try to call the facade which we created it returns "Sean" as expected. Now in the final step we have to put all these steps together:

<?php

class Student{
    public function students(){
        return 'Sean';
    }
}

 app()->bind('student', function(){
    return new Student;   
 }); 


 class Facade{
    public static function __callStatic($name, $args){
        return app()->make(static::getFacadeAccessor())->$name();
    }

    protected static function getFacadeAccessor(){
        //override take place 
    }
}

class StudentFacade extends Facade {
    protected static function getFacadeAccessor(){
        return 'student';
    }
}

//log or die it to the output
dd(StudentFacade::students());

Conclusion

I hope that by the end of this lesson you have been able to broaden your knowledge about facades work. If you have questions or wish to continue the conversation feel free to tweet at me.

References

Laravel Beginner tutorial - Bitfumes

What is WRAPPER in programming, what does it help to do? - Stackoverflow

AWS Machine Learning comprises a rich set of tools that Amazon offers to help developers integrate machine learning models into their applications.

AWS also offers pre-trained models for use cases including computer vision, recommendation engines, and language translation.

Amazon currently offers 15 machine learning services on its platform. In this article, we will take a look at each one of them so we can understand the type of problem they are trying to solve for their customers.

SageMaker

Amazon SageMaker helps you to take your machine learning models from concept to production in a fraction of time compared to traditional code-based approaches.

Sagemaker is a managed service and has the complete suite of tools you need to build, train, and deploy your machine learning models. They help you label your data, optimize your algorithms, and more. It's a complete solution for creating and deploying machine learning models.

SageMaker also has an autopilot option that will automatically process the data and run it through multiple algorithms. This helps developers find the best algorithm for their model without manually training and testing those models.

Sagemaker also comes with an integrated IDE and a sharable Jupyter notebook that you can use to collaborate with your team.

CodeGuru

Amazon CodeGuru lets you automate your code reviews and performance optimizations for your application.

It can find issues like race conditions, resource leaks, and wasted CPU cycles. This helps you produce higher quality code by providing specific recommendations based on code context.

Codeguru’s algorithms are trained with codebases from Amazon’s projects. Right now, CodeGuru supports only Java applications, but you can expect the functionality to extend to other languages in the near future.

Comprehend

Amazon Comprehend is a Natural Language Processing service from Amazon that uses machine learning to find valuable insights from textual data.

Comprehend can work with unstructured data like product reviews, customer emails, twitter tweets, and so on to help you draw conclusions (like overall audience sentiment).

It's also a fully managed service, meaning you can use pre-trained models to work with your data. Comprehend also has an additional service called Amazon Comprehend Medical that lets you work with medical documents to analyze medical conditions and dosages.

Forecast

Amazon Forecast is used to build time-series prediction models using your existing datasets.

Forecast works great for use cases like predicting future business expenses, stock price prediction, and resource planning for organizations based on customer demand.

This service is also customizable and lets you build custom models on top of Amazon’s existing deep learning models. Like most machine learning tools in AWS, Forecast is also fully managed and can scale according to your business needs.

Fraud Detector

Amazon Fraud Detector is another fully managed service that helps you detect fake registrations and fraudulent transactions.

Fraud detector can identify potentially fraudulent accounts and then helps you set up additional verification for those flagged accounts.

A fraud detector needs an existing dataset of labeled fraudulent transactions in order to train and understand the pattern of your customer behavior. It then uses this data to prevent further fraudulent transactions.

You can also configure custom authentication rules for guest logins and product trials.

Kendra

Amazon Kendra is an AI-powered enterprise search engine that will help you deliver highly accurate search results based on customer queries.

You can use. Kendra to power search engines in your products that help your users find exactly what they're looking for.

Kendra can also be used to help customers find answers to specific problems while using your product without the need for additional customer support.

Kendra also supports natural language questions, delivering an even smoother experience for your customers.

Lex

Amazon Lex lets you build conversational interfaces into your products. Lex offers Natural Language Understanding (NLU) models that can understand conversational input from users and perform the right actions.

Lex can be used as a replacement for manual customer support to help filter common queries, and it can answer them automatically. It is also a fully managed service that scales automatically and uses a pay-as-you-use model.

Personalize

Amazon Personalize lets you create custom recommendations for your customers based on their usage patterns.

While traditional recommendation engines can be used only to recommend products, Personalize lets you literally personalize every step of your customer’s user experience.

Personalize is a great tool to build product recommendations, custom search results based on queries and employ targeted marketing promotions.

Polly

Amazon Polly helps you build speech-enabled products for your customers. Polly provides lifelike voice outputs across a variety of languages including Chinese, Korean and Japanese.

Polly is powered by deep learning algorithms that mimic a conversational style interface that can be used in narrations, telephony applications, and other applications.

Rekognition

Amazon Rekognition is a computer vision solution from AWS that helps developers build applications that can recognize objects from images and videos.

In addition to automatic object recognition, you can customize Rekognition to pick out specific objects and scenes based on your own requirements.

Rekognition can be used in use cases like identifying manufacturing defects in products, spotting unauthorized personnel in an organization, scanning for inappropriate content in movies, and so on. It can also be used to analyze player movements in games for post-game analysis.

Textract

Amazon Textract enables you to read data from scanned documents. The usual approach to digitizing paper documents is using manual data entry or OCRs with custom configurations.

Textract makes it easier by automatically applying rules to documents and extracting valuable data along with components like forms and images within the document.

Textract is useful for processing loan applications, medical claims, and more. In addition to extracting data, these can be optimized for search using Textract. Documents that usually take months to process using manual methods can be processed in hours using AWS Textract.

Transcribe

Amazon Transcribe lets you build speech to text services in your application. Transcribe is useful in building medical transcription services, streaming audio, generating subtitles for video recordings, and more.

Transcribe can also be used to convert customer calls into text and analyze them for improved customer service. Cataloging audio archives is another use case for AWS transcribe.

Translate

Amazon Translate is a machine learning service similar to Google Translate. Translate can work with a variety of languages with high accuracy, which lets businesses customize their languages based on the the demographics of their audiences.

Translate is also designed to be more natural-sounding to customers since the context of the sentence is also taken into account.

Translate is also highly customizable so it can help improve the accuracy of translation when working with your brand names and unique words related to your business.

DeepLens

Amazon DeepLens is a video camera with in-built deep learning capabilities that helps you build and test computer vision models in real-time.

DeepLens is fully programmable and can be used to test models like live object recognition, classifying birds/ animals, face detection, and so on.

The product is designed for developers getting started in machine learning. It helps them get a grasp of how their models will work in the real world.

DeepLens is also integrated with the AWS ecosystem and can be used with other AWS services like Lambda and Rekognition to extend its capabilities.

DeepRacer

If you are a fan of self-driving cars, AWS DeepRacer is a small autonomous race car designed by AWS that runs using machine learning. DeepRacer helps you test your reinforcement learning models using a physical track.

You can build reinforcement learning models using AWS SageMaker and test them instantly using DeepRacer. Amazon also gives you the opportunity to connect and compete with fellow racing enthusiasts by building virtual private race tracks.

Summary

With a solution to almost every machine learning problem, Amazon Machine Learning offers a rich set of tools for machine learning engineers to work with.

Amazon also adds new services every few months based on new use cases, making it one of the most dependable platforms where engineers can build AI solutions for their customers.

Loved this article? Join my Newsletter and get a summary of my articles and videos every Monday.

So how can we use Storybook to build libraries and design systems that self-document as we build them?

• What is Storybook?
• What are we going to build?
• Step 0: Bootstrapping an app
• Step 1: Installing Storybook
• Step 2: Creating a new button
• Step 3: Using our new Button component
• Repeat: Creating a new Header component
• More Storybook features

What is Storybook?

Storybook is a JavaScript tool that allows developers to create organized UI systems making both the building process and documentation more efficient and easier to use.

Lonely Planet's Backpack UI

Once you build out a component, Storybook lets you create a "story" file where you can then import your component and create various use case examples in an iFramed sandbox using that component.

This provides an organized and focused environment to build new components and work on existing ones.

What are we going to build?

We're going to bootstrap a new React JS app using Create React App.

Inside that app, we're going to install Storybook and create a few new components that will help us learn how to create new components that we can work on in a story and then use it in a React app.

Step 0: Bootstrapping an app

To get started, we're going to start from scratch with Create React App. This will help us focus on getting productive in Storybook rather than walking through integrating it into a current app.

That said, if you're already working with an app created using Create React App that's not ejected, you should be able to still follow on with Part 1 and beyond just the same!

So let's get started by navigating to where we want to create our new app and run the Create React App command:

npx create-react-app my-storybook

Note: feel free to replace my-storybook with the directory name of your choice.

Bootstrapping with Create React App

Once that's finished running, you can navigate to the directory:

cd my-storybook

And we're ready to go!

Step 1: Installing Storybook

Storybook luckily makes it really easy to get started with a standard installation of React. Particularly with Create React App, Storybook automatically detects that we're using an app created using CRA and installs the dependencies and scaffolds everything for us.

Initializing Storybook

To get started installing Storybook, run:

npx -p @storybook/cli sb init

Initializing Storybook in a React app

If you aren't using Create React App or it didn't work, you can check out their available guides in their docs.

After that's finished, all of our Storybook dependencies should be installed.

Finished installing Storybook

Starting up Storybook

So now we're ready to get moving! Finally, run:

yarn storybook
# or
npm run storybook

And once everything finishes loading, Storybook will open a new tab in your browser and you should now see a welcome message inside of your new Storybook dashboard!

Storybook welcome page

Follow along with the commit!

Step 2: Creating a new button

If you took a second to poke around the dashboard, you might have noticed that it comes pre-loaded with a Button that's available as a demo.

Storybook demo button

You should also notice if you click the button, you actually see an action print out inside of the Actions tab at the bottom. This shows the event that's captured from the button click.

It's simple, but this is great to get a nice feel about what to expect in storybook. The only issue is, this is meant purely for demonstration purposes, so let's build our own button to replace it.

Creating a new Button component

To get started, let's first create a few directories:

• Under src, create a new folder called components
• Under components, create a new folder called Button

Once you create those folders, create a new file called index.js inside of your src/components/Button folder and inside add:

// Inside src/components/Button/index.js

export { default } from './Button';

This will import the next file we created called Button.js which will allow us to more easily import our files with src/components/Button instead of /src/components/Button/Button.

Next, let's create Button.js right next to our index.js file with the following content:

// Inside src/components/Button/Button.js

import React from 'react';

const Button = ({ children, ...rest }) => {
  return (
    <button className="button" {...rest}>
      { children }
    </button>
  )
}

export default Button;

Here, we're creating a new component called Button that adds a class of button to the element and passes through the children. We're a additionally destructuring the rest of the props into the rest variable and spreading that value into the <button> element.

If you've followed along, your files should now look like this:

Button component in React

Using our new Button component

So now that we have our Button component, let's use it!

Open up the file src/stories/1-Button.stories.js and replace the line that's importing Button with:

Updating the Button Storybook story

And once you hit save, you can open back up your browser tab with your Storybook dashboard, and you can now see a button that looks mostly similar, but it uses the browser's default styles for the <button> element. You'll even notice that if you click it, the event will still be logged under the Actions tab.

Styling our Button component

Finally, we probably don't want to use the browser default styles, so let's make it look nice.

In our src/components/Button directory, add a new file Button.css and add the following content:

/* Inside src/components/Button/Button.css */

.button {
  color: white;
  font-weight: bold;
  background-color: blueviolet;
  border: none;
  padding: .8em 1em;
  border-radius: .2rem;
}

This applies a few styles to our .button class like adding a background color and changing the font color to white.

But if you open Storybook, you'll notice it didn't do anything. To use it, we need to import it into our component.

Inside src/components/Button/Button.js add the following at the top under the React import:

import './Button.css';

And once you save that and open up your browser, you should now see our new button with our updated styles!

New Button in Storybook

Follow along with the commit!

Step 3: Using our new Button component

The ultimate goal of our component is to use it right? So let's add it to our app.

Switching over to the React app

First we'll need to either start our React app in a new terminal tab or kill the Storybook process and start the React process there. To start the React app using Create React App, run:

yarn start
# or
npm run start

Once that loads, we should have our standard Create React App if you're following along with me:

New Create React App

Importing and using the new button

Next, inside of src/App.js, let's import our new Button at the top of the page:

import Button from './components/Button';

With Button imported, we can use it. Here, we can simply add it anywhere we want in the page. I'm going to replace the Learn React link with:

<p>
  <Button>Hello, Storybook!</Button>
</p>

And if we save and reload the page, we should now see our Button on the page!

New Button in Create React App

Follow along with the commit

Repeat: Creating a new Header component

The great thing about Storybook and React (or any of the supported frameworks) is that this process scales to as many components as you want.

So let's build another component!

Creating our Header component

Similar to our Button, let's start off by creating the set of directories and files that give us our component.

Since we already did this once, I'm going to provide the code without walking through what's going on.

Let's start off by spinning back up our Storybook server with:

yarn storybook
# or 
npm run storybook

Create a Header directory inside the src/components directory.

Create an index.js file inside of src/components/Header with the following content:

// In src/components/Header/index.js

export { default } from './Header';

Create a Header.js file inside of src/components/Header with the following content:

// In src/components/Header/Header.js

import React from 'react';
import './Header.css';

const Header = ({ children }) => {
  return (
    <h2 className="header">
      { children }
    </h2>
  )
}

export default Header;

Create a Header.css file inside of src/components/Header with the following content:

/* In src/components/Header/Header.css */

.header {
  font-family: sans-serif;
  font-size: 2.5em;
  color: blueviolet;
  border-bottom: solid 5px aqua;
  padding-bottom: .2em;
  box-shadow: 0 5px 0 blueviolet;
}

Now if you notice, if you try to open up Storybook, again, nothing will happen. This time we need to create a new story file.

Creating a new Story file

Inside src/stories, add a new file called 2-Header.stories.js:

// Inside src/stories/2-Header.stories.js

import React from 'react';

import Header from '../components/Header';

export default {
  title: 'Header',
  component: Header,
};

export const Text = () => <Header>Hello Header</Header>;

Here's a breakdown of our story file:

• First, we import our component – this is pretty standard any time we want to use it
• The first thing we export is a default object. With Storybook, it expects the default export to be the configuration of our story, so here we provide it with a title and we pass in the component that we're using for this story
• The second and last thing we export is the Text constant. With Storybook, any non-default export will be considered a variation that will get nested under the title that you provide in the default export

And if you save this file and open up your Storybook dashboard in the browser, you should now see the new header!

New Header component in Storybook

Using the Header component

Using our component is just the same as our Button component, so inside of src/App.js, let's add our Header.

After starting your React server, first import our new Header:

// In src/App.js

import Header from './components/Header';

Then add it to the top of the page:

// In src/App.js

<Header>My App</Header>

And if you open the page, we'll see our new Header!

Create React App with new Header and Button components

Follow along with the commit!

Adding more components

As you've noticed with our second Repeat step – adding a new component is pretty much the same process for any type of component we want to add. Once we have it in our library, we can develop it in a focused environment and then import it to our app to use.

You can now use this to manage your library of components and better maintain an entire system for your project!

More Storybook features

Storybook doesn't stop with just adding components, it provides the ability to configure Addons that enhance the core capabilities opening up a lot of possibilities.

Here are some of my favorites...

Story Source

When building a component system, the hope is that people can easily use these components. But if you don't have documentation, someone would have to open up the file or try to find another use example.

Instead, Story Source shows the code source of the story file you created allowing someone browsing your Storybook dashboard to get an example right along with the component output!

Storybook Story Source demo

Storyshots

If you're a fan of automated testing, you might have heard of using Jest or another tool for adding snapshot testing to your app.

StoryShots is a way to easily add Jest snapshot testing to your component system. It creates snapshots based off of the stories you create so you can make sure that your components aren't fundamentally changing (or breaking) during development.

Snapshot example with StoryShots

What's your favorite part of Storybook?

Share with me on Twitter!

Continue the conversation!

This article gives you a lightning-speed overview of Svelte - a Javascript framework which lets you write less code, use no virtual DOM, and create truly reactive apps.

As if that's not enough, Svelte is super-intuitive too! Built with developers in mind, it is designed to make coding easier, bug-squashing quicker, and a developer's work life generally happier.

If that sounds right up your street, then read on!

While 5 minutes won't be enough to teach you Svelte in depth, it does allow for a solid overview of the basics, including:

• Components
• Importing and Exporting
• Templating
• Event handling
• Event dispatching
• Reactivity

If you want to find out more about Svelte after reading this article, check out the full course over on Scrimba. There, you'll learn about even more Svelte features and have the chance to road test your new skills with a bunch of interactive challenges.

For now, let's get started on the basics!

Components

(Click the image to access the course.)

First, we'll take a look at how to build a Svelte component, which can contain three parts; <script>, which contains Javascript, <style>, which contains CSS and the HTML, which uses the JS from the <script> tag.

<script>
    let say = 'hi';
</script>

<style>
    div {
        color: red;
    }
</style>

<div>
    Say: {say}
</div>

Note: The bare minimum needed for a Svelte component is the HTML, so the app will still work without the <script> and <style> tags.

Importing and Exporting

One big benefit of using frameworks is the ability to modularise code by splitting it into separate components. Components are then imported into the main app using import keyword:

  import Face from './Face.svelte';

Unlike with other frameworks, the export keyword is not required to use a component elsewhere in an app. Instead, it is used to pass parameters, or props, from parent elements to their children.

For example, we can set a size prop with a default size in our component:

<script>
    export let size = 1;
</script>

<div style="font-size: {size}em">=)</div>

This allows us to easily adjust the size of the imported component over in our App.svelte file:

<script>
    import Face from './Face.svelte';
</script>

<Face size="4" />
<Face size="10" />
<Face />

The various sizes appear on the DOM as follows:

(Click the image to access the course.)

Head over to the course on Scrimba to view and play around with the full code.

Templating

The Svelte templating syntax is a great feature which lets us add if statements and for loops to our HTML.

The syntax for an if statement looks like this:

<Container>
    {#if say}
        <div>
            Hi!
        </div>

    {/if}
</Container>

While a for loop is as follows:

{#each [2,1,0] as faceIndex}
        <Face index={faceIndex} />
    {/each}

Event handling

To allow the user to interact with our app, we need event handlers. In this scrim, we see how to add a simple on:click to a <button> to show our app's header:

<button on:click={() => {showHeader = true}}>show</button>

And what a header it is..! (Click the image to access the course.)

There is a gotcha with this, though - it only works with the native HTML <button> tag and not imported components called <Button>.

Luckily, we can work around this by using event forwarding, i.e. adding an on:click to the native <button> tag in its component file:

<button on:click>
        <slot></slot>
</button>

Event dispatching

(Click the image to access the course.) Event dispatching is a great feature of Svelte which increases code usability by allowing us to use the same element for more than one action.

In this scrim, we learn how to use one <Button> component to both show and hide an element.

We create an event dispatcher in the <Button> component file like this:

<script>
    import {createEventDispatcher} from 'svelte';
    const dispatch = createEventDispatcher();    
</script>

We then add the dispatcher to our native HTML <button> like this:

<button on:click={() => dispatch('show')}>
    Show
</button>
<button on:click={() => dispatch('hide')}>
    Hide
</button>

Lastly, we declare the button's functionality options in the App.svelte file as follows:

<Buttons on:show={() => {showHeader = true}} on:hide={() => {showHeader = false}} />

We can refactor this by passing values up through the dispatch using the event variable (e). In this case, the <Button> in our App.svelte file looks like this:

<Buttons on:click={(e) => {showHeader = e.detail}} />

While the native HTML <button>s in our component file look like this:

<button on:click={() => dispatch('click', true)}>
    Show
</button>
<button on:click={() => dispatch('click', false)}>
    Hide
</button>

Reactivity

If you want a piece of code to rerun every time its associated variable is updated, then Svelte's unique feature, the reactive statement, is for you. We declare a reactive statement with $: as follows:

let score = 0;
    $: smileySays = 'Hi there, your score is: ' + score;

It's also possible to run if statements inside reactive statements. The code to do so looks like this:

let score = 0;
    $: smileySays = 'Hi there, your score is: ' + score;
    $: if (score < -4) smileySays = 'Wow your score is low!'

That's about all the features we can cram into our 5-minute tour of Svelte. I hope you found it useful and are inspired to try out the framework for yourself and test your new-found skills.

Don't forget to check out the full course over at Scrimba to find out about even more Svelte features and give the coding challenges a try.

Wherever your coding journey takes you next, happy learning :)

How can Tailwind CSS help us to take control of our styles?

• What is Tailwind?
• So what makes Tailwind great?
• Part 1: Adding Tailwind CSS to a static HTML page
• Part 2: Adding Tailwind CSS to a React app

What is Tailwind?

Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application.

The underlying goal is that as you're building your project, you don't need to deal with cascading styles and worrying about how to override that 10-selector pileup that's been haunting your app for the last 2 years.

So what makes Tailwind great?

Taildwind's solution is to provide a wide variety of CSS classes that each have their own focused use. Instead of a class called .btn that is created with a bunch of CSS attributes directly, in Tailwind, you would either apply a bunch of classes like bg-blue-500 py-2 px-4 rounded to the button element or build a .btn class by applying those utility class to that selector.

While Tailwind has a lot more going for it, we're going to focus on these basics for this tutorial, so let's dig in!

Part 1: Adding Tailwind CSS to a static HTML page

We're going to start off by applying Tailwind CSS straight to a static HTML page. The hope is that by focusing on Tailwind and not the app, we can get a better understanding of what's actually happening with the framework.

Step 1: Creating a new page

You can get started by simply creating a new HTML file. For the content, you can use whatever you want, but I'm going to use fillerama.io so the filler content is a bit more fun.

New HTML page with content

If you want to simplify this step, you can just copy the file I created to get started.

Follow along with the commit!

Step 2: Adding Tailwind CSS via CDN

Tailwind typically recommends that you install through npm to get the full functionality, but again, we're just trying to understand how this works first.

So let's add a link to the CDN file in the <head> of our document:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Once you save and reload the page, the first thing you'll notice is that all of the styles were stripped!

HTML page with the Tailwind CSS base

This is expected. Tailwind includes a set of preflight styles to fix cross-browser inconsistencies. For one, they include the popular normalize.css which they build upon with their own styles.

But we're going to learn how to use Tailwind to add back our styles and set things up how we want!

Follow along with the commit!

Step 3: Using Tailwind CSS to add styles to your page

Now that we have Tailwind installed, we've added the ability to make use of their huge library of utility classes that we'll now use to add styles back to our page.

Let's start off by adding some margin to all of our paragraphs (<p>) and our list elements (<ol>, <ul>). We can do this by adding the .my-5 class to each element like so:

<p class="my-5">
  Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along…
  Belligerent and numerous.
</p>

The class name follows a pattern that you'll notice with the rest of the utility classes – .my-5 stands for margin (m) applied to the y-axis (y) with a value of 5 which in Tailwind's case, it uses rem, so the value is 5rem.

HTML page with basic paragraph styles

Next, let's make our headers look like actual headers. Starting with our h1 tag, let's add:

<h1 class="text-2xl font-bold mt-8 mb-5">

Here's what's happening:

• text-2xl: set the text size (font-size) to 2xl. In Tailwind, that 2xl will equate to 1.5rem
• font-bold: set the weight of the text (font-weight) to bold
• mt-8: Similar to my-5, this will set the margin top (t) to 8rem
• mb-5: And this will set the margin bottom (b) to 5rem

HTML page with styled H1

With those classes added to the h1, let's apply those same exact classes to the rest of our header elements, but as we go down the list, reduce the size of the font size, so it will look like:

• h2: text-xl
• h3: text-lg

HTML page with all headers styled

Now let's make our list elements look like lists. Starting with our unordered list (<ul>), let's add these classes:

<ul class="list-disc list-inside my-5 pl-2">

Here's what we're adding:

• list-disc: set the list-style-stype to disc (the markers on each line item)
• list-inside: sets the position of the list markers using relative to the list items and the list itself with list-style-position to inside
• my-5: set the margin of the y axis to 5rem
• pl-2: set the left padding to 2rem

Then we can apply the exact same classes to our ordered list (<ol>), except instead of list-disc, we want to change our style type to list-decimal, so that we can see numbers given it's an ordered list.

<ol class="list-decimal list-inside my-5 pl-2">

And we have our lists!

HTML page with styled lists

Finally, let's make our content a little easier to read by setting a max width and centering the content. On the <body> tag, add the following:

<body class="max-w-4xl mx-auto">

/Note: Typically you wouldn't want to apply these classes to the <body> itself, rather, you can wrap all of your content with a <main> tag, but since we're just trying to get an idea of how this works, we'll roll with this. Feel free to add the <main> tag with those classes instead if you prefer!/

And with that, we have our page!

HTML page with centered content

Follow along with the commit!

Step 4: Adding a button and other components

For the last part of our static example, let's add a button.

The trick with Tailwind, is they intentionally don't provide pre-baked component classes with the idea being that likely people would need to override these components anyways to make them look how they wanted.

So that means, we're going to have to create our own using the utility classes!

First, let's add a new button. Somewhere on the page, add the following snippet. I'm going to add it right below the first paragraph (<p>) tag:

<button>Party with Slurm!</button>

HTML page with unstyled button

You'll notice just like all of the other elements, that it's unstyled, however, if you try clicking it, you'll notice it still has the click actions. So let's make it look like a button.

Let's add the following classes:

<button class="text-white font-bold bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">
  Party with Slurm!
</button>

Here's a breakdown of what's happening:

• text-white: we're setting our text color to white
• font-bold: set the weight of the text to bold (font-weight)
• bg-purple-700: set the background color of the button to purple with a shade of 700. The 700 is relative to the other colors defined as purple, you can find these values on their palette documentation page
• hover:bg-purple-800: when someone hovers over the button, set the background color to purple shade 800. Tailwind provides these helper classes that allow us to easily define interactive stiles with things like hover, focus, and active modifiers
• py-2: set the padding of the y-axis to 2rem
• px-4: set the padding of the x-axis to 4rem
• rounded: round the corners of the element by setting the border radius. With tailwind, it sets the border-radius value to .25rem

And with all of that, we have our button!

HTML page with a styled button

You can apply this methodology to any other component that you'd like to build. Though it's a manual process, we'll find out how we can make this process easier when building in more dynamic projects like those based on React.

Follow along with the commit!

Part 2: Adding Tailwind CSS to a React app

For more of a real-world use case, we're going to add Tailwind CSS to an app created with Create React App.

First, we'll walk through the steps you need to take to add tailwind to your project using a fresh install of Create React App, then we'll use our content from our last example to recreate it in React.

Step 1: Spinning up a new React app

I'm not going to detail this step out too much. The gist is we'll bootstrap a new React app using Create React App.

To get started, you can follow along with the directions from the official React documentation:

https://reactjs.org/docs/create-a-new-react-app.html

And once you start your development server, you should now see an app!

Create React App starting page

Finally, let's migrate all of our old content to our app. To do this, copy everything inside of the <body> tag of our static example and paste it inside of the wrapper <div className="App"> in the new React project.

Migrating code to React app

Next, change all class=" attributes from the content we pasted in to className=" so that it's using proper React attributes:

Fixing class attribute in content

And lastly, replace the className App on our wrapper <div> to the classes we used on our static <body>.

Adding wrapper styles to the app

Once you save your changes and spin back up your server, it will look deceivingly okay.

React app with basic content

React includes some basic styles itself, so while it looks okay, we're not actually using Tailwind yet. So let's get started by installing it!

Follow along with the commit!

Step 2: Installing Tailwind in your React app

There are a few steps we'll need to go through in order to get Tailwind up and running on our app. Make sure you follow these steps carefully to ensure it's properly configured.

First, let's add our dependencies:

yarn add tailwindcss postcss-cli autoprefixer
# or
npm install tailwindcss postcss-cli autoprefixer

Per Tailwind's documentation, we need to be able to process our styles so that they can be properly added to our pipeline. So in the above, we're adding:

• tailwindcss: the core Tailwind package
• postcss-cli: Create React App already uses postcss, but we need to configure Tailwind to be part of that build process and run it's own processing
• autoprefixer: Tailwind doesn't include vendor prefixes, so we want to add autoprefixer to handle this for us. This runs as part of our postcss configuration

We're also going to add two dev dependencies that make it easier to work with our code:

yarn add concurrently chokidar-cli -D
# or
npm install concurrently chokidar-cli --save-dev

• concurrently: a package that lets us set up the ability to run multiple commands at once. This is helpful since we'll need to watch both the styles and React app itself.
• chokidar-cli: let's us watch files and run a command when changed. We'll use this to watch our CSS file and run the build process of the CSS on cahnge

Next, let's configure postcss, so create a new file in the root of your project called postcss.config.js and include the following:

// Inside postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

This will add the Tailwindcss and Autoprefixer plugins to our postcss config.

With our configuration, we need to include it as part of the build and watch processes. Inside package.json, add the following to definitions to your scripts property:

"build:css": "tailwind build src/App.css -o src/index.css",
"watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",

Additionally, modify the start and build scripts to now include those commands:

"start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'",
"build": "npm run build:css && react-scripts build",

With our configuration ready to go, let's try our styles back to where they were when we left off from the static example.

Inside the App.css file, replace the entire content with:

@tailwind base;
@tailwind components;
@tailwind utilities;

This is going to import Tailwind's base styles, components, and utility classes that allow Tailwind to work as you would expect it to.

We can also remove the App.css import from our App.js file because it's now getting injected directly into our index.css file. So remove this line:

import './App.css';

Once you're done, you can start back up your development server! If it was already started, make sure to restart it so all of the configuration changes take effect.

And now the page should look exactly like it did in our static example!

React app with content styled

Follow along with the commit!

Step 3: Creating a new button component class with Tailwind

Tailwind doesn't ship with prebaked component classes, but it does make it easy to create them!

We're going to use our button that we already created as an example of creating a new component. We'll create a new class btn as well as a color modifier btn-purple to accomplish this.

The first thing we'll want to do is open up our App.css file where we'll create our new class. Inside that file, let's add:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

If you remember from our HTML, we're already including those same classes to our <button> element. Tailwind let's us "apply" or include the styles that make up these utility classes to another class, in this case, the .btn class.

And now that we're creating that class, let's apply it to our button:

<button className="btn text-white bg-purple-700 hover:bg-purple-800">
  Party with Slurm!
</button>

And if we open up our page, we can see our button still looks the same. If we inspect the element, we can see our new .btn class generated with those styles.

.btn class in a React app with Tailwind

Next, let's create a color modifier. Similar to what we just did, we're going to add the following rules:

.btn-purple {
  @apply bg-purple-700 text-white;
}

.btn-purple:hover {
  @apply bg-purple-800;
}

Here, we're adding our background color and our text color to our button class. We're also applying a darker button color when someone hovers over the button.

We'll also want to update our HTML button to include our new class and remove the ones we just applied:

<button className="btn btn-purple">
  Party with Slurm!
</button>

And with that change, we can still see that nothing has changed and we have our new button class!

Styled button in React with Tailwind

Follow along with the commit!

Applying these concepts to more components

Through this walkthrough, we learned how to create a new component class using the Tailwind apply directive. This allowed us to create reusable classes that represent a component like a button.

We can apply this to any number of components in our design system. For instance, if we wanted to always show our lists the way we set them up here, we could create a .list-ul class that represented an unordered list with the Tailwind utilities list-disc list-inside my-5 pl-2 applied.

What tips and tricks do you like to use with Tailwind?

Share with me on Twitter!

In this highly competitive tech market space, companies are always looking to get a leg up on their competitors through the best web design and development.

But when you're building a modern business app, you need to keep market competition and digital experience trends in perspective for a modernized and marketable application for your business.

But before you do that, I will give you some information about the role of artificial intelligence in web development. Then we will see some of the most popular AI and machine learning frameworks for building web apps in 2020.

So now let’s understand the role of AI and machine learning in web development.

The Relevance of AI and Machine Learning In Web Development

Artificial Intelligence and Machine Learning are popular technologies that allow web applications to learn and observe from a user's preferences and habits.

AI-enabled websites are on-trend everywhere. One reason is that AI uses genetic algorithms and neural networks to build artificial intelligence into web applications from scratch. And this is now easy to implement for most companies.

Why Incorporate AI and Machine Learning into Your Web Development Process?

They Delight Your Customer Support Team

Setting up an AI chatbot on your website can improve the whole customer support experience and can help you provide your users much better assistance.

It communicates naturally, understands your emotions, and can respond to the most complex questions, even if the questions are not connected to your product, service or industry. So, if you want to grow your business and take your business to the next level, do not hesitate to implement a AI chatbot.

Examples of Chatbots Available on the Web:

Capital One's "Eno": Capital One is a banking organization that offers financial products and surveys. They use Eno, a chatbot to help customers manage their queries related to their transactions, account balances, and analyzing their spending habits.

MedWhat's Virtual Medical Assistant: Powered by machine learning, the MedWhat’s chatbot provides quick responses to questions based on behaviors that it learns by interacting with users. This chatbot makes it easier for both patients and doctors to discuss and diagnose health issues in a faster, easier, and more transparent manner.

Domino’s “Dom”: This is the interactive Pizza Bot that allows you to order food from the Domino’s site. The Domino’s chatbot offer sa full pizza menu, tracks deliveries, and can also track your previous orders and consider them for re-ordering.

They Help Maximize User Experience (UX)

AI UX (Image Source: uxstudioteam.com)

AI and machine learning help you understand your customer’s preferences. A website with AI and ML features helps you analyze your customer’s preferences, search history, and even location. This way you will be able to design and improve your website according to the needs of your customers. You can also give them a better customer experience by updating your UI accordingly.

Implementing AI solutions to your online shop will help give your customers a more personalized shopping experience, as if everything was created exactly for them only. AI and machine learning creates a real world atmosphere on your website that motivates customers to make a purchase.

Take Amazon.com as an example – it's of one of the biggest online shopping portals and it uses AI and ML for product recommendations. It also helps the company identify user preferences, and all this is based on previously tracked data by Amazon’s AI solution.

They Provide Fast Access to Information

Voice-Based Search Functions (Image Source: www.dialogtech.com)

Business owners are looking to add voice-based search functions to their websites, as it is becoming more and more popular. Apps like Google Assistant, Siri, and Cortana that support voice-enabled search functions give users fast access to information.

Suppose you are an online clothing retailer. You can use voiced-based search systems to help your customers find the clothing types they want with complete product information such as price of the item, fabric type, size, color, and length.

They Streamline Your Marketing Strategy

AI in Marketing (Image Source: www.statista.com)

Artificial Intelligence and Machine Learning technology have been used by marketing teams for making major marketing decisions and market predictions based on what is in demand.

The technology works by analyzing a user’s behavior by finding out what type of products a user likes and other preferences. This data will help marketing teams to decide what changes should be done in order to increase sales and improve conversion rate.

The potential of AI and machine learning in web development hasn't escaped the attention of top companies such as Google, Facebook, IBM, and Microsoft Launch.

They've all come out with AI toolkits and APIs for featuring natural language understanding and machine learning features in modern web applications.

Learning to integrate and implement AI technology into your site is definitely feasible.

Top AI and Machine Learning Frameworks For Web Development

But the bottom line comes down to how effectively business leaders implement AI into their web development processes.

To help you out, here are five innovative AI and machine learning frameworks for web development to keep an eye on in 2020 and beyond.

TensorFlow

Quick stats:

• Developed By: Google Brain Team
• Founded In: November 2015
• Written In: C++, Python, and CUDA
• Platforms: Linux, macOS, Microsoft Windows, Android, JavaScript
• Latest Release: 2.1.0 / January 8, 2020
• Architecture: Flexible for cross-platform development

Ever since its introduction in the year 2015, TensorFlow has been a favorite machine learning framework amongst the web developers. This is because the Google Brain Team, the creator of the framework, has built it in such a way that it lets developers use machine learning in JavaScript or in Node for numerical computation at once.

It also helps teams build web applications using machine learning models with JavaScript and its modules which are responsible for recognizing different core functionalities of real-world interactions and objects.

It brings the features of AI and machine learning technology to the front-end, so the users can have real-time experiences of the real-world from a web browser.

Businesses of all sizes are using the Tensorflow machine learning framework for transforming their web development process so that the end-users can leverage the benefits of machine learning and AI predictive analysis.

Model building is greatly influencing the web development process. And TensorFlow uses multiple abstractions and powerful libraries to form and train models for the creation of complex technologies.

The result is code with some higher-order functionality, as well as code that is easier to read, write, debug, and work with. TensorFlow uses the high-level Keras API that not only makes the code cleaner, but can also reduce the code length to create the models.

After creating models, you can apply distributed methods in TensorFlow to reduce the training time of the neural network models on different servers. The idea is that you can perform multiple coding experiments over different servers. With full control over the servers, TensorFlow allows developers to experiment with code that occurs in the network for any operation.

All these features and functionalities help you get started with TensorFlow easily.

Apache Mahout

Quick stats:

• Developed By: Apache Software Foundation
• Founded In: April 2008
• Written In: Java and Scala
• Latest Release: 0.14.0 / 6 March 2019
• Platforms: Apache Hadoop, Apache Spark, Apache Flink, Scala+
• Architecture: Flexible for cross-platform development

The Apache Software Foundation along with a group of developers maintains Apache Mahout. It is an open source machine learning framework that allows web app developers to design huge web applications. These applications are designed to help data scientists and statisticians to perform various mathematical algorithms.

Professional web developers recommend this framework in 2020 because it improves the performance of web applications by using distributed linear algebra frameworks with mathematically expressive R-Like Scala DSL for distributed algorithms. It also offers scalability, simplicity, and speed.

Mahout uses the Apache Hadoop library to build scalable supervised and unsupervised machine learning systems in the cloud. Developers can use Mahout for creating recommendation-based engines to perform functions such as classification as well as grouping and mining large volumes of data.

Apache Mahout has the clustering implementations that are supported by algorithms like K-Means, Canopy, Spectral, Dirichlet, Fuzzy K-Means, and Streaming K-Means. Clustering can help developers to discover and organize elements in distinct groups based on the similarity between items.

This is why the Mahout-based web applications can characterize their customer groups based on purchasing patterns, product classifications, and grouping of items.

Microsoft Cognitive Toolkit

Quick stats:

• Developed By: Microsoft Research
• Founded In: 2016
• Written In: C++ and Python
• Latest Release: 2.7.0 / 26 April 2019
• Platforms: Windows, Linux
• Model Types: Support feed-forwards DNNs, convolutional and recurrent neural networks

Microsoft Cognitive Toolkit is yet another open-source deep learning framework. You can add it to web programs through high-level and low-level APIs for building neural networks. It passes knowledge to web programs through API optimizers and offers a number of components to measure the performance of neural networks.

If you want to create dynamic web applications, it is a perfect deep learning framework. Thanks to its functionality, scalability, and speed, you can keep cumbersomeness coding at bay. CNTK based web applications are efficient for image recognition, voice recognition, handwriting.

It supports both convolutional neural networks (CNNs) and recurrent neural networks (RNNs/LSTMs). CNTK is an extensible library and you can also use this in your Python, C#, or C++ programs, or as a machine-learning tool through its own model description language (BrainScript).

Additionally, it boasts 64-bit Linux or 64-bit Windows operating systems that you can install from the pre-compiled binary packages, or from the GitHub library.

Its support for the ONNX format (Open Neural Network Exchange) greatly influences the web development process with AI and machine learning technology. It uses AI models with a variety of frameworks, tools, runtimes, and compilers. This is why CNTK is one of the best machine learning frameworks in areas such as speech recognition, predictive analysis, and understanding large unstructured datasets.

Many big tech companies use this framework for their web development because of its capabilities in these areas.

Caffe2

Quick stats:

• Developed By: Berkeley Vision and Learning Center
• Founded In: 2017
• Written In: C++ and Python
• Latest Release: 1.0 / 18 April 2017
• Platforms: Linux, macOS, Windows
• Architecture: Expressive and allow innovation in web development

This is a perfect deep learning framework for those who think that big things come in small packages. Yes, if you are looking for a flexible deep learning framework, Caffe2 is what you should go for. Developers love to use it as it is flexible and easy to develop code.

With the help of extensible code, it enhances your application's performance. The best part is developers just need to have basic knowledge of C++ source code.

It offers bindings for Python and MATLAB. And, your app code won't be complicated, as it supports state of the art code and models. It has pre-trained networks of Caffe2 Model Zoo for scenarios that include web development and research experiments.

One of its biggest benefits is its speed – it can process over 60M of images on a daily basis with a single Nvidia K40 GPU.

There are various firms using the Caffe2 deep learning framework for building web apps with image segmentation and classification features. Caffe2 is able to provide a swift and fast development process that is mainly possible because of its convolutional neural networks.

Also if you use the Caffe2 Model Zoo with a set of the pre-trained models you can opt for a complete no-code development process.

Apache Singa

Quick stats:

• Developed By: Apache Software Foundation
• Founded In: September 2015
• Written In: C++, Python, Java
• Latest Release: 3.0.0 / April 20, 2020
• Platforms: Linux, macOS, Windows
• Architecture: Logical system to support distributed training frameworks

Last, but not the least, Apache Singa is a popularly used deep learning framework for web development. It is quite versatile and developers can use it for creating web applications for an array of businesses. It offers several advantages, not just to the app developers but also to app owners.

Apache Singa has numerous features including flexible architecture for distributed training, and three main components:

• the Core component for memory management,
• the IO component for data analysis, and
• the Model component for NLP and image recognition.

Currently, the Apache Singa team is working on the idea of SINGA-lite and Singa-Easy for making AI and deep learning more accessible and easy to use for developers.

If you are looking for an extremely popular, secure, speedy, and flexible framework for building deep learning models, Apache Singa is what you need to go for in the year 2020.

At present, SINGA systems have been applied to healthcare apps for analyzing electronic medical record (EMR) data. There are many more companies using Apache SINGA to build useful data types applications.

In the End

You might have already heard about all these AI and machine learning frameworks for web development. There are, of course, other frameworks out there. But according to my analysis, these 5 frameworks will be the winners this year.

You can use these frameworks for building awesome web apps and reaching out to your users worldwide through your web apps. This will help you increase your customer base, which in turn leads to the success of your business.

If you need services like that, and don't have the resources to set them up yourself, then you should hire a company that offers custom web development services according to your requirements.

You can contact my team at Syncrasy Tech for more details on AI enabled web development services. Or contact us here.

If you have any queries, you can reach out here on LinkedIn.

Thanks for reading!