#vue pass data from one component to another | Explore Tumblr posts and blogs

suzanneshannon · 5 years ago

Text

A Font-Like SVG Icon System for Vue

Managing a custom collection of icons in a Vue app can be challenging at times. An icon font is easy to use, but for customization, you have to rely on third-party font generators, and merge conflicts can be painful to resolve since fonts are binary files.

Using SVG files instead can eliminate those pain points, but how can we ensure they’re just as easy to use while also making it easy to add or remove icons?

Here is what my ideal icon system looks like:

To add icons, you just drop them into a designated icons folder. If you no longer need an icon, you simply delete it.

To use the rocket.svg icon in a template, the syntax is as simple as <svg-icon icon="rocket" />.

The icons can be scaled and colored using the CSS font-size and color properties (just like an icon font).

If multiple instances of the same icon appear on the page, the SVG code is not duplicated each time.

No webpack config editing is required.

This is what we will build by writing two small, single-file components. There are a few specific requirements for this implementation, though I’m sure many of you wizards out there could rework this system for other frameworks and build tools:

webpack: If you used the Vue CLI to scaffold your app, then you’re already using webpack.

svg-inline-loader: This allows us to load all of our SVG code and clean up portions we do not want. Go ahead and run npm install svg-inline-loader --save-dev from the terminal to get started.

The SVG sprite component

To meet our requirement of not repeating SVG code for each instance of an icon on the page, we need to build an SVG “sprite.” If you haven’t heard of an SVG sprite before, think of it as a hidden SVG that houses other SVGs. Anywhere we need to display an icon, we can copy it out of the sprite by referencing the id of the icon inside a <use> tag like this:

That little bit of code is essentially how our <SvgIcon> component will work, but let’s go ahead create the <SvgSprite> component first. Here is the entire SvgSprite.vue file; some of it may seem daunting at first, but I will break it all down.

<template> <svg width="0" height="0" style="display: none;" v-html="$options.svgSprite" /> </template> <script> const svgContext = require.context( '!svg-inline-loader?' + 'removeTags=true' + // remove title tags, etc. '&removeSVGTagAttrs=true' + // enable removing attributes '&removingTagAttrs=fill' + // remove fill attributes '!@/assets/icons', // search this directory true, // search subdirectories /\w+\.svg$/i // only include SVG files ) const symbols = svgContext.keys().map(path => { // get SVG file content const content = svgContext(path) // extract icon id from filename const id = path.replace(/^\.\/(.*)\.\w+$/, '$1') // replace svg tags with symbol tags and id attribute return content.replace('<svg', `<symbol id="${id}"`).replace('svg>', 'symbol>') }) export default { name: 'SvgSprite', svgSprite: symbols.join('\n'), // concatenate all symbols into $options.svgSprite } </script>

In the template, our lone <svg> element has its content bound to $options.svgSprite. In case you’re unfamiliar with $options it contains properties that are directly attached to our Vue component. We could have attached svgSprite to our component’s data, but we don’t really need Vue to set up reactivity for this since our SVG loader is only going to run when our app builds.

In our script, we use require.context to retrieve all of our SVG files and clean them up while we’re at it. We invoke svg-inline-loader and pass it several parameters using syntax that is very similar to query string parameters. I’ve broken these up into multiple lines to make them easier to understand.

const svgContext = require.context( '!svg-inline-loader?' + 'removeTags=true' + // remove title tags, etc. '&removeSVGTagAttrs=true' + // enable removing attributes '&removingTagAttrs=fill' + // remove fill attributes '!@/assets/icons', // search this directory true, // search subdirectories /\w+\.svg$/i // only include SVG files )

What we’re basically doing here is cleaning up the SVG files that live in a specific directory (/assets/icons) so that they’re in good shape to use anywhere we need them.

The removeTags parameter strips out tags that we do not need for our icons, such as title and style. We especially want to remove title tags since those can cause unwanted tooltips. If you would like to preserve any hard-coded styling in your icons, then add removingTags=title as an additional parameter so that only title tags are removed.

We also tell our loader to remove fill attributes, so that we can set our own fill colors with CSS later. It’s possible you will want to retain your fill colors. If that’s the case, then simply remove the removeSVGTagAttrs and removingTagAttrs parameters.

The last loader parameter is the path to our SVG icon folder. We then provide require.context with two more parameters so that it searches subdirectories and only loads SVG files.

In order to nest all of our SVG elements inside our SVG sprite, we have to convert them from <svg> elements into SVG <symbol> elements. This is as simple as changing the tag and giving each one a unique id, which we extract from the filename.

const symbols = svgContext.keys().map(path => { // extract icon id from filename const id = path.replace(/^\.\/(.*)\.\w+$/, '$1') // get SVG file content const content = svgContext(path) // replace svg tags with symbol tags and id attribute return content.replace('<svg', `<symbol id="${id}"`).replace('svg>', 'symbol>') })

What do we do with this <SvgSprite> component? We place it on our page before any icons that depend on it. I recommend adding it to the top of the App.vue file.

<template> <div id="app"> <svg-sprite />

The icon component

Now let’s build the SvgIcon.vue component.

<template> <svg class="icon" :class="{ 'icon-spin': spin }"> <use :xlink:href="`#${icon}`" /> </svg> </template> <script> export default { name: 'SvgIcon', props: { icon: { type: String, required: true, }, spin: { type: Boolean, default: false, }, }, } </script> <style> svg.icon { fill: currentColor; height: 1em; margin-bottom: 0.125em; vertical-align: middle; width: 1em; } svg.icon-spin { animation: icon-spin 2s infinite linear; } @keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } </style>

This component is much simpler. As previously mentioned, we leverage the <use> tag to reference an id inside our sprite. That id comes from our component’s icon prop.

I’ve added a spin prop in there that toggles an .icon-spin class as an optional bit of animation, should we ever need. This could, for example, be useful for a loading spinner icon.

Depending on your needs, you may want to add additional props, such as rotate or flip. You could simply add the classes directly to the component without using props if you’d like.

Most of our component’s content is CSS. Other than the spinning animation, most of this is used to make our SVG icon act more like an icon font¹. To align the icons to the text baseline, I’ve found that applying vertical-align: middle, along with a bottom margin of 0.125em, works for most cases. We also set the fill attribute value to currentColor, which allows us to color the icon just like text.

<p style="font-size: 2em; color: red;"> <svg-icon icon="exclamation-circle" /> Error! </p>

That’s it! If you want to use the icon component anywhere in your app without having to import it into every component that needs it, be sure to register the component in your main.js file:

// main.js import Vue from 'vue' import SvgIcon from '@/components/SvgIcon.vue' Vue.component('svg-icon', SvgIcon) // ...

Final thoughts

Here are a few ideas for improvements, which I intentionally left out to keep this solution approachable:

Scale icons that have non-square dimensions to maintain their proportions

Inject the SVG sprite into the page without needing an additional component.

Make it work with vite, which is a new, fast (and webpack-free) build tool from Vue creator Evan You.

Leverage the Vue 3 Composition API.

If you want to quickly take these components for a spin, I’ve created a demo app based on the default vue-cli template. I hope this helps you develop an implementation that fits your app’s needs!

¹ If you’re wondering why we’re using SVG when we want it to behave like an icon font, then check out the classic post that pits the two against one another.

The post A Font-Like SVG Icon System for Vue appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

A Font-Like SVG Icon System for Vue published first on https://deskbysnafu.tumblr.com/

2 notes · View notes

lorettakamari123 · 2 years ago

Text

Building the Future: Exploring the World of Web Development

Web development has evolved drastically over the years, from simple HTML pages to complex web applications. With the rise of new technologies and advancements in the field, every web development company considers it an exciting area to explore. In this blog post, we will explore the world of web development and how it is shaping the future of the internet.

What is web development?

Firstly, let's define what web development is by a web development company. Web development refers to the process of building websites and web applications. It involves a combination of programming languages, design principles, and technologies to create functional and visually appealing websites. The goal of web development is to provide a seamless user experience for visitors to a website, while also ensuring that the site is accessible, secure, and optimized for search engines.

One of the most exciting aspects of web development is the constant innovation and evolution of technologies. With each passing year, new tools and techniques are introduced that make web development easier, faster, and more efficient. Some of the most popular web development technologies today include HTML, CSS, JavaScript, React, Angular, Vue, Node.js, and MongoDB, among others.

Technology behind web development

HTML (HyperText Markup Language) is the backbone of every website. It is a markup language that is used to create the structure and content of web pages. CSS (Cascading Style Sheets) is used to style and format web pages, while JavaScript is used to add interactivity and dynamic functionality to websites.

Every Logo design company React, Angular, and Vue use JavaScript frameworks that simplify the development of complex web applications. These frameworks provide developers with pre-built components and libraries that can be easily integrated into their projects, reducing development time and costs.

Node.js is a popular JavaScript runtime that allows developers to build server-side applications using JavaScript. It provides an event-driven architecture that is highly scalable and efficient. MongoDB is a NoSQL database that is used to store and manage data in web applications.

In addition to these technologies, there are many other tools and frameworks that are used in web development today. These include Bootstrap, jQuery, SASS, LESS, Grunt, Gulp, and many others. The use of these tools and frameworks has revolutionized the way web development is done, making it easier and more efficient than ever before.

Development trends for Web and Mobile

Another exciting aspect of web development is the rise of mobile devices and mobile web browsing. With more and more people accessing the internet through their smartphones and tablets, it has become crucial for websites to be optimized for mobile devices. This has led to the development of responsive web design, which allows websites to adapt to different screen sizes and resolutions.

Responsive web design involves using flexible layouts, fluid images, and media queries to ensure that websites look good and function properly on any device. Every web development company considers it a critical aspect of web development today, as mobile devices continue to dominate the internet landscape.

Security & Reliability

One of the biggest challenges in web development today is ensuring that websites are secure and protected from cyber threats. With the rise of cybercrime and data breaches, it has become more important than ever to secure websites and web applications. This involves using encryption technologies such as SSL/TLS, implementing strong authentication mechanisms, and regularly updating and patching software to address vulnerabilities.

In addition to security, accessibility is another important aspect of web development. Websites must be designed in a way that is accessible to all users, including those with disabilities. This involves adhering to accessibility guidelines and standards such as the Web Content Accessibility Guidelines (WCAG), which provide a framework for creating accessible websites.

The future of web development

As we look to the future of web development, there are many exciting possibilities on the horizon. Every Logo design company considers one of the most promising areas of development is the Internet of Things (IoT). IoT refers to the network of connected devices, appliances, and systems that are connected to the internet.

The world of web development is constantly evolving, with new technologies and trends emerging all the time. Here are some of the top trends that are currently trending in the world of web development:

Progressive Web Apps (PWA)

Progressive Web Apps (PWA) are web applications that provide users with an app-like experience on their mobile devices. A web development company uses PWAs that are fast, reliable, and can work offline, which makes them ideal for users with poor internet connections or limited data plans. They also use push notifications to keep users engaged and can be installed on the user's home screen, just like a native app.

Artificial Intelligence (AI) and Machine Learning (ML)

AI and ML are revolutionizing web development by providing developers with powerful tools to create intelligent and interactive applications. AI-powered chatbots, voice assistants, and recommendation engines are just a few examples of how AI is being used in web development today.

Voice Search Optimization

With the rise of voice assistants like Siri, Alexa, and Google Assistant, optimizing websites for voice search has become increasingly important. Web developers are now designing websites that are optimized for voice search, using techniques such as natural language processing and schema markup.

Motion UI

Motion UI is a design trend that uses animation and transitions to create a more engaging and interactive user experience. It involves using subtle animations to guide users through the website and highlight important information.

Single Page Applications (SPA)

Single Page Applications (SPA) are web applications that load a single HTML page and dynamically update the content as the user interacts with the site. Every web development company uses SPAs to provide a seamless user experience and can be faster than traditional multi-page applications.

Cybersecurity

Cybersecurity has become a top priority in web development due to the rise of cyber threats and data breaches. Web developers are now implementing security measures such as SSL/TLS encryption, two-factor authentication, and regular software updates to protect websites and web applications from cyber attacks.

Headless CMS

Headless CMS is a content management system that separates the content from the presentation layer. This allows developers to use the CMS as a backend for multiple websites or applications, without being limited by the front-end design. Headless CMS provides developers with more flexibility and control over their content, allowing them to create custom experiences for users.

Web Assembly (WASM)

Web Assembly (WASM) is a new technology that allows developers to run high-performance applications in the browser. It is a low-level assembly language that can be used to create complex applications, such as games and simulations, that run at near-native speed in the browser.

These are just a few of the top trends that are currently trending in the world of web development in every Logo design company. As the field continues to evolve, new technologies and trends are sure to emerge, making web development an exciting and dynamic field to be a part of.

1 note · View note

digitalinfobytes · 3 years ago

Text

How Angular Web Development Can Benefit Your Project?

Angular is a web application framework that is used to build web applications. The framework was developed by Google and it has been around for several years now. It is one of the most popular frameworks today, with developers preferring it over other frameworks such as ReactJS and VueJS.

There are several reasons why you should consider using Angular Web Development for your next project rather than choosing another framework such as React or VueJS:

Web Development with Angular

Angular is a front-end web development framework that was originally developed in 2009 by Google. It was initially created as an internal tool for developing web apps at Google and later released as an open-source project.

Why choose Angular for your Web Development project?

Angular is built using NodeJS, which allows you to use JavaScript.

Angular is a structural framework that implements the MVC pattern. In this case, Angular uses JavaScript code to create HTML views and interact with them (Controller).

The Controller acts as an intermediary between View and Model; it handles DOM events such as clicks or key presses and passes data back to the model on which it operates (View).

The Model contains data storage methods while View represents what we see on screen with HTML elements like form labels/fields or buttons etc…

Angular also allows developers to use the MVVM pattern instead of the MVC pattern when developing their projects since it’s highly flexible when it comes down to choosing between these two patterns!

Angular is Highly Flexible

Angular is a highly flexible framework, which means you can use it for a wide variety of projects. Angular is indeed best suited to building large-scale applications and websites, but that doesn’t mean it’s not suitable for smaller projects.

Angular web development is flexible and allows developers to build applications of any size. The fact that the framework doesn’t require you to use large frameworks like React or Vue makes it ideal for smaller apps as well as larger ones.

Angular Allows Automatic Updates

Angular is a framework that allows you to update your website automatically without having to do any coding.

You can update your website with Angular and it is easy to use. It is a great way to keep your website up to date and it will be easier for developers when working on the project.

Angular Makes it Easier for New Developers to Join the Team

The most significant advantage of Angular Web Development is that it allows new developers to quickly learn and understand its component-based structure. Developers can focus on their components, not the entire framework, which helps them concentrate on what they need to do. This means less time spent researching and more time spent developing your product.

Another benefit of this is that it makes it easier for you to onboard new members of your team as they no longer need to learn everything about Angular before they can start contributing. They just need to know enough about their chosen component or two to get started building out functionality confidently!

Angular is a Highly Compatible Framework

It can be used with any language, database, web server and browser, operating system, framework, or library.

Initially developed by Google in 2009 Angular was released as open-source software in 2010. Since its release, it has been improved continuously and now there are many versions available that offer different features for developers to choose from.

The latest version is Angular 7 which was released in March 2019 with some new features like more CLI commands and an improved compiler among others…

Angular Saves you Money and Time

Angular saves you money and time in many ways:

It is a popular framework, so your developers need not learn a new language or technology.

It’s an easy-to-learn angular web development framework. Your team will be up and running quickly.

It’s easy to use, so you don’t have to worry about training your employees or consultants on how to work with Angular. This will save you time and money because they won’t make mistakes like forgetting what the code does or not understanding how all the different pieces of Angular fit together.

Angular is also great for maintenance because it’s built from scratch by Google engineers who know how the software works at its core level—and they’re constantly updating their frameworks based on feedback from developers using them every day!

When Looking at Web Development Frameworks, Consider Using Angular.

If you’re an experienced developer who has been working with JavaScript and HTML for years, then it may be time to expand your horizons by learning a new framework. While this isn’t the only option, it’s one of the best and most widely used frameworks in the industry today.

Let’s take a look at some of the benefits of Angular for Web Development:

Faster development time and lower maintenance costs over time (due to its ease of use)

More readable code that is easy on developers’ eyes (the syntax is simple and concise)

Conclusion

So, why Angular web development? In a nutshell, it is more secure and faster than other frameworks. It’s also easier to use, which means you can get your project completed sooner. If you have any questions about this post or would like more information on our services, please contact us today!

#Angular Web Development #Benefits of Angular for Web Development #Why Choose Angular for Your Web Development Project

0 notes

adityaagharwal1220-blog · 6 years ago

Link

A form will pop-up what feels for you to fill out and when you hit enter the app creates that timer for you. When you decide to delete a timer if you click the delete button, the timer will remove itself from the page that is pretty much what you would call a dynamic user interface.

React was created because the facebook develop team wanted a better way to structure JavaScript applications.

So, why use React.Js ?

Number one is for reusable components

Components are a huge part of what makes react so understanding them is crucial when programming with react components let you split your code into separate independent reusable pieces.

You can think of components as functions that can take inputs to call props and return elements describing what should appear on the screen. You also take those already created functions and reuse than in other parts of your app without any problems.

So, react components are like individual Legos that can build something great and then connect it together and they’re also reusable.

Also Read:

Learn Reactjs: Become The Highest Paid Front-End Software Developer Today

stateful components | stateless components

stateful components are components using state which means they have values that can change stateless components, on the other hand, are components that don’t use state, which means they don’t have values that change.

1 note · View note

mobappdevelopmentcompany · 4 years ago

Text

Significant React Native Libraries for Mobile App Development in 2021

React Native happens to be one of the most sought-after app development frameworks across the globe as it comes with a host of advantages like a cost-effective developmental cycle, faster time-to-market, high performance, modular and intuitive architecture, and many more.

One of the unique benefits of this framework is the availability of countless third-party libraries that expedite the development and prove highly convenient for every React Native App Development Company. However, owing to the presence of thousands of React Native libraries, selecting the apt ones becomes a herculean task. As a consequence, development teams often have to spare a great deal of time and effort for picking the right tool or library that would prove fruitful.

For easing out this task, I have penned down the most significant tools and libraries that complement the React Native framework. A quick read will help you to find the perfect match that suits your requirement.

Tools and Libraries for Various React Native App Development Categories

Category: User Interface

React Native Elements

This UI library, built using JavaScript, has earned 20.5k stars and 4.2k forks on GitHub.

This library comes with cross-platform compatibility and supports Expo.

It is easy to use, customizable, and community-driven.

Lottie-react-native

This library created by Airbnb enables adding attractive animations to React Native applications.

React Native developers can either select from the free animations available or design and add their animations employing “Adobe After Effects.”

Functioning: The animation data is exported in JSON format with Bodymovin and rendered natively on mobile.

Styled Components

This library enables developers to write CSS code for styling components

It removes the mapping between styles and components, thereby easing out the usage of components as a low-level styling construct.

The styles can be reused several times resulting in lesser coding

React Native Vector icons

React Native Vector icons is a library that offers numerous icons of various types, designed for the React Native Apps.

Each element can be fully customized

Category: Forms

Formik

It’s a small library that helps to build forms in React

Formik enables to validate the form values, display error messages and helps to submit the form.

Redux-form

Redux-form enables proper state management in Redux

It helps in tracking the commonest form states like fields contained in the form, focussed field, field values, fields which the users have interacted with, etc.

Category: Testing

Jest

This is a popular testing framework, designed and maintained by Facebook, and is used for testing JavaScript code. This versatile testing tool is compatible with any JavaScript framework or library, including React, Angular, VueJS, etc. Uber, Airbnb, and Intuit are some of the top brands that have leveraged this tool. Its offerings are:

High-speed performance

Standard syntax with report guide

Mocks functions, with the inclusion of third-party node_module libraries

Conducts parallelization, snapshot, and async method tests

Enables managing tests with bigger objects, by using live snapshots

Mocha

Mocha is a JavaScript test framework, used for testing React and React Native apps. It provides the Developers full control over what plugins and tools they choose to use while testing applications. Its major highlights are:

Runs on Node.js

Provides support for asynchronous front-end and backend testing, test coverage reports, and the usage of any claims library

Helps to track errors

Excels in mocking tests

Enzyme

Enzyme is another testing tool developed by Airbnb.

It comes with API wrappers, to ease out developers’ tasks like manipulating, asserting, and traversing the React DOM.

It supports full and shallow DOM and also supports static rendering

Besides, it is compatible with several other testing frameworks and libraries like Mocha and Jest.

Chai

It’s an assertion testing library meant for browser and node

Chai employs behavior-driven and test-driven development principles

Compatible with various testing tools and can be paired with any JS testing framework

Its functionality can be extended by using several custom plugins

Moreover, it enables the developers to create their plugins and share them in the community

Category: Navigation

React Navigation

This component supports navigational patterns like tabs, stacks, and drawers

It is based on JavaScript and is simple to use

It enables developers to effortlessly set up app screens

Can be completely customized as well as extended

React Router

This is a library of navigational components which composes declaratively with the app.

It allows one to specify named components, create various types of layouts, and pass layout components.

Category: App’s State Management

Redux

Redux, a free-standing library, and a predictable state container is predominantly used along with the UI library components of React. Besides the React ecosystem, one can also use Redux with other frameworks like Vue, Angular, Vanilla JS, Ember, etc. Its principal offerings are:

Can be used with back-end as well as front-end libraries

Enables the developers to write consistent codes

Allows editing the live code

Functions well in various environments – Server-side, client-side, and native

Connects the pieces of state to the React components by minimizing the need for props or callbacks.

Category: Linting and checking Types

ESLint

It’s a JavaScript-based, open-source linter tool

ESLint is configurable and pluggable

It improves the code consistency and makes it bug-free

It helps in evaluating patterns in the code and eliminates errors by automatically fixing the code, to enhance the overall code quality.

It helps detect creases in the JavaScript code that don’t comply with the standard guidelines

It helps react native developers to create their own linting rules

Flow

Developed by Facebook, Flow is a static type checker JavaScript library

It easily identifies problems during coding

It proves beneficial in crafting large applications, as it prevents bad rebases when several persons are working on a single program.

The main objective of Flow is to make the code more precise and enhance the speed of the coding process

Category: Networking

Networking tools are used to establish a networking flow in React Native projects. Let us have a look at a few of them.

react-native –firebase is a lightweight layer on the top of Firebase libraries. It creates a JavaScript bridge connecting to the native JavaScript SDKs to ease out using Firebase in React Native Application Development projects.

Apollo Client is quite compatible and adaptable. It is required when the developers need to use GraphQL. It assists in creating a User Interface that pulls data with GraphQL.

Axios, a lightweight HTTP JavaScript client was built to send asynchronous HTTP requests to REST endpoints. Besides, it performs CRUD operations.

react-native-ble-manager is a plugin that helps in connecting and transmitting data between a mobile handset and BLE peripherals.

Category: Utils

The below-mentioned ready-made tools simplify and speed up working with Utils while developing React Native apps.

Ramda is a library that eases out creating functional pipelines without user-data mutation.

The JavaScript functions’ toolkit Lodash offers clean and effective methodologies to your development team for working with collections and objects.

Reselect builds memorized selectors that are needed for avoiding unnecessary recalculation and redrawing of data. This library also quickens the speed of your app.

Moment works with various data formats and is capable of parsing, manipulating as well as validating times and dates in JavaScript.

Validate.js, designed by Wrap, offers the app developers a declarative way to validate JS objects

Category: Analytics

The following libraries act as mediators enabling one to implement the trending analytical tools into their React Native Mobile App Development projects.

react-native-mixpanel is a kind of wrapper for the library named Mixpanel and helps the developers to reap all the benefits of the Mixpanel library.

react-native-google-analytics-bridge acts as a bridge for establishing compatibility between Google Analytics tools and React Native projects.

Category: Localization

react-native-i18n helps in localizing or internationalizing applications. It integrates the i18n-js library in JavaScript for React Native applications.

Category: In-app Purchases

react-native-in-app-utils is a small library used to implement the in-app billing procedure for iOS apps. It can be effortlessly installed and is simple to work with.

react-native-billing is used for adding in-app billing to applications meant for the Android platform. It possesses a simple UI and wraps anjlab’s InApp Billing library to function as a bridge.

Category: AR and VR

ViroReact is used to speedily develop native cross-platform VR/AR apps in React Native. Its key functionalities are:

It has an easy learning curve

It comes with a high-performing native 3D rendering engine as well as a custom extension of React for creating VR and AR solutions.

It provides support for all kinds of platforms in VR including Samsung Gear VR, Google Cardboard, Google Daydream, etc. for Android and iOS; and AR including Android ARCore and iOS ARKit platforms.

Needs React-Viro-CLI and React-Native-CLI for writing cross-platform native codes

Final Verdict:

I hope the aforesaid information was helpful and has given you a clear idea of which library/libraries would be most suitable for your next project.

To know more about our other core technologies, refer to links below:

Angular App Development Company

Ionic App Development Company

Blockchain app developers

#React Native App Development

0 notes

erossiniuk · 4 years ago

Text

Getting started with C# and Blazor

In this new post, I want to summarize what I understood for getting started with C# and Blazor, the new technology from Microsoft. I briefly spoke about Blazor in some other posts but here I want to introduce it properly.

We live in exciting times, as .NET developer’s life has never been better. We can create apps for any operating system be it Windows, Linux, iOS, Android or macOS. Of course, we can also build amazing web-based applications with ASP.NET. MVC, Razor Pages, and WebAPI have allowed us to create robust scalable and reliable systems for years, but there has long been a missing piece to the puzzle.

One thing all of ASP.NETs web solutions have in common is that they are server based. We’ve never been able to leverage the power of C# and .NET to write client-side applications, this has always been the domain of JavaScript.

So, I’m going to introduce you to a revolutionary client-side framework: Blazor. Built on web standards, Blazor allows us to write rich, engaging user interfaces using C# and .NET. We’ll explore how Blazor can make your development process more efficient and raise your productivity levels, especially if you’re using .NET on the server as well. We’ll cover hosting models, an important concept to understand when starting out with Blazor. We’ll look at both production supported models and the benefits and tradeoffs of each. Next, we’ll introduction components and the benefits of using them to build UIs. Finally, we’ll discuss the reasons why you should consider Blazor for your next project.

Table of contents

Why choose Blazor for new applications?

Pros

Components, a better way to build UI.

What is a component?

The benefits of a component-based UI

Components

Anatomy of a Blazor component

Understanding the code

Blazor, a platform for building modern UI with C#

No installation required

Mobile applications

Understanding hosting models

Blazor Electron

Code example

Mobile Blazor Bindings

Blazor WebAssembly

Process begin

DOM manipulation

blazor.boot.json

dotnet.wasm

Calculating UI Updates

Process explained

Benefits

Tradeoffs

Blazor WebAssembly summarize

Blazor Server

Process begins

Process static files

Calculating UI updates

Process explained

SignalR

DOM

Performance

The test

Testing

Benefits

Tradeoffs

Blazor Server summarize

Why choose Blazor for new applications?

Arguably, the hardest part of starting a new project in recent times has been choosing the tech stack, there is just so much choice available. This is especially true in the front-end world. Pick a framework (Angular, React, Vue), pick a language (TypeScript, CoffeeScript, Dart), pick a build tool (Webpack, Parcel, Browserify). If a team is new to this eco-system, it can seem an almost impossible task to try and work out which combination of technologies will help make the project a success; it’s even hard for teams with experience!

So, first in this getting started with C# and Blazor, let’s cover some of the top reasons for choosing Blazor for your next project and how it can help avoid some of the issues I’ve just mentioned.

Pros

C#, a modern and feature rich language – It’s powerful, easy to learn, and versatile

Great tooling – The .NET community has been fortunate to have some amazing tooling. Visual Studio is an extremely powerful, feature rich and extensible IDE. It’s also 100% free for individuals or non-enterprise teams of 5 or less. If you prefer something more lightweight, then there is Visual Studio Code – one of the most popular code editors today. Both Visual Studio and VS Code are both cross platform:

Visual Studio for Windows and Mac

Visual Studio Code for Windows, Mac and Linux.

.NET Ecosystem – While many new frameworks need to wait for an ecosystem to build up around them, Blazor can tap into the existing .NET ecosystem. Blazor applications target .NET Standard 2.1 and can in theory use any .NET Standard NuGet package.

Unopinionated – There are no preferred patterns or practices for Blazor development, you can write applications using the ones you’re familiar and comfortable with.

Shallow learning curve – If you’re an existing .NET developer then the learning curve for Blazor is quite shallow. Razor, C#, dependency injection, project structure will all look familiar to you. This means you can focus on writing features quicker, rather than learning the framework.

Code sharing – If you’re using C# on the server then Blazor makes an excellent paring. One of the most frustrating problems with different client and server languages is the inability to reuse code. With Blazor, everything is C#. Any shared code can be placed in a common .NET Standard class library and shared easily between server and client.

Open source – As with many projects at Microsoft, Blazor is fully open source and the code is freely available on GitHub for you to browse, download, or fork your own copy.

Components, a better way to build UI.

Blazor, as with many modern front-end frameworks, uses the concept of components to build the UI. Everything is a component, pages, parts of a page, layouts, they’re all components. There are various types of component in Blazor as well as multiple ways to write them all of which will be explored in future chapters. But learning to think in terms of components is essential for writing Blazor applications.

What is a component?

You can think of a component as a building block. You put these building blocks together to form your application. These building blocks can be as big or as small as you decide, however, building an entire UI as a single component wouldn’t be a good idea. Components really show their benefit when you think of them as a way to divide up logical areas of a UI. Let’s look at an example of a user interface structured as components.

Example of a layout divided into components

Each area of the interface is a component and each one has a certain responsibility. You may also notice that there is a hierarchy forming. The layout component sits at the top of the tree, the menu, header, home page and footer are all child components of the layout component. These child components could, and probably would have child components of their own. For example, the header component could contain a logo component and a search component.

Example of nesting components to form a component tree

The benefits of a component-based UI

Many UIs have repeating elements in them, a great advantage to using components is that you can define an element in a component and then reuse the component wherever the element repeats. This can drastically cut down on the amount of repeated code in an application. It also makes the maintainability of the application much better as if the design of that element changes you only need to update it in a single place.

To cater for more advanced scenarios, components can define their own APIs allowing data and events to be passed in and out. Imagine a line of business application, it’s probably safe to assume that within that app there would be lots of places data would be displayed in table format. One approach would be to create each table as its own component, however, this would mean we would end up with a lot of components which displayed data in a table.

A better approach would be to define a single component which took in a dataset as a parameter and then displayed it in a table. Now we have a single component for displaying data in a table that we can reuse all over the application. We could also add features to this component, things such as sorting or paging. As we do, this functionality is automatically available to all the tables in the application as they are all reusing the same component.

Components

Components help speed up the development process. Due to the reusable nature of components, using them often leads to shorter development times. They can be composed together.

While usually self-contained, it’s also possible to have components work together to create more complex UI. For example, let’s take the data table scenario we just talked about, that could be a single component but that could potentially be quite large.

Another approach would be to divide it up into several smaller components, each performing a certain job. We could have a table header component, a table body component even a table cell component. Each of these components are performing a specific job but they are still part of the overall table component.

Anatomy of a Blazor component

Now, in this post getting started with C# and Blazor, we have a better idea of what components are in a general sense, let’s look at an example of a component in Blazor. For this we’re going to grab a component from the Blazor project template.

In figure 1.3 we can see an example of a component from Blazors standard project template, Counter.razor.

The sections of a component in Blazor

This particular component is known as a routable component, as it has a page directive declared at the top. Routable components are essentially a page in the application. When the user navigates to the /counter route in the application, this component will be loaded by Blazor router. It displays a simple counter with a button and when the user clicks on the button the count is incremented by one and the new value displayed to the user.

Understanding the code

While understanding the code isn’t important at this point, we can understand the structure of the component. Figure 1.3 is divided up into three sections each has a certain responsibility.

Section 1 is used to define directives, add using statements, inject dependencies, or other general configuration which applies to the whole component.

Section 2 defines the markup of the component; this is written using the Razor language, a mix of C# and HTML. Here we define the visual elements which make up the component.

Section 3 is the code block. This is used to define the logic of the component. It is possible to write any valid C# code into this section. You can define fields, properties, even entire classes if you wish.

Blazor, a platform for building modern UI with C#

Blazor is a fully featured framework for building modern client-side applications using the power of C# and .NET. Allowing developers to build engaging applications which work across nearly any platform – including web, mobile and desktop.

Blazor is an alternative to JavaScript frameworks and libraries such as Angular, Vue and React. If you’ve had experience working with any of these then you’ll probably start spotting familiar concepts. The most notable influence is the idea of building UIs with components, a concept all these technologies share and something we’ll explore in more detail later in this chapter.

No installation required

Because Blazor is built on top of web standards; it doesn’t require the end user to have .NET installed on their machines or any kind of browser plugin or extension. In fact, with Blazor WebAssembly applications we don’t even need .NET running on the server, this flavor of Blazor can be hosted as simple static files.

Being built on .NET means we have access to the vibrant ecosystem of packages available on NuGet. We also have best in class tooling with Visual Studio and Visual Studio Code, and of course, with .NET being cross platform, we can develop our Blazor applications on whatever our preferred platform is, be that Windows, Mac or Linux.

Mobile applications

Therefore, I want to highlight that Blazors programming model can also be used to build cross-platform native mobile applications via an experimental project called Mobile Blazor Bindings. This is a collaboration between the ASP.NET Core team and the Xamarin team to investigate the potential and demand for using Blazor to build non-web UIs. Microsoft has also announced the future evolution of Xamarin Forms, the Multi-platform App UI framework known as .NET MAUI. This framework will allow developers to build native apps which run on Windows, macOS, iOS and Android. According to the roadmap, Blazors programming model will be offered as an option for building these new .NET MAUI apps. This really makes Blazor a compelling technology to learn as once understood, could allow developers to build UIs for almost any platform or device.

Hopefully, you can already see Blazor is an exciting technology with a lot of potential. But there is a key concept which is important to understand before we go any further, that of hosting models. Let’s tackle that next.

Understanding hosting models

When first getting started with Blazor you will immediately come across the concept of hosting models. Essentially, hosting models are where a Blazor application is run. Currently, Blazor has two production supported hosting models called Blazor WebAssembly and Blazor Server. Regardless of which of these models you choose for your application, the component model is the same meaning components are written the same way and can be interchanged between either hosting model.

Blazor has a separation between hosting models and its app/component model. Meaning components written for one hosting model can be used with another.

The above image shows an abstract representation of Blazors architecture, with the separation between the app and component model and the various hosting models. One of the interesting aspects of Blazor is the potential of other hosting models being made available over time to allow Blazor to run in more places and be used to create more types of UI.

Outside of the two production hosting models we will cover below, there are also two other experimental models Microsoft have been testing, Blazor Electron and Mobile Blazor Bindings.

Blazor Electron

Blazor Electron is the oldest of the two experiments and allows Blazor components to be hosted in an Electron application (https://www.electronjs.org/). Developers write components for this model using HTML and C# in the exact same way as they would for Blazor WebAssembly or Blazor Server.

Code example

An example of a component which can be used by all three of hosting models is shown in the following code.

<div> <p>Current count: @currentCount</p> <button @onclick="IncrementCount">Click me</button> </div> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }

Mobile Blazor Bindings

The newer experiment is Mobile Blazor Bindings. This model allows developers to write native mobile applications using Blazors programming model. However, this hosting model can’t use components written using web technologies, components for this hosting model must be written using native controls. The following code contains the same component as the code abode but rewritten for the Mobile Blazor Bindings hosting model.

<StackLayout> <Label> Current count: @currentCount </Label> <Button OnClick="@IncrementCount">Click me</Button> </StackLayout> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }

As you can see the programming model is the same between the two code samples. The logic in the code block is unchanged, it’s just C# after all. The only difference is in the markup where web technologies have been swapped for native mobile controls. This does mean that we can’t swap component around between web-based hosting models and native hosting models. However, once we’ve mastered Blazors programming model we can easily use that knowledge to create other types of UI.

Now we’ve talked a little about hosting models in general we’re going to focus in on the two production supported options available in Blazor today, Blazor WebAssembly and Blazor Server.

Blazor WebAssembly

Blazor WebAssembly is the principal hosting model for Blazor applications. Choosing this option will mean your application will run entirely inside the client’s browser making it a direct alternative to JavaScript SPA (Single Page Application) frameworks. To understand how this hosting model works we’re going to walk through the process of initializing a Blazor WebAssembly application shown in following image.

Bootup of a Blazor WebAssembly application showing the interactions between the client’s browser and the web server

Process begin

The process begins when a browser makes a request to the webserver. The web server will return a set of files needed to load the application, these include the host page for the application, usually called index.html, any static assets required by the application such as images, CSS and JavaScript. As well as a special JavaScript file called blazor.webassembly.js.

At this point, you may be wondering why we have a JavaScript file, one of the big selling points of Blazor is the ability to write UI logic using C# instead of JavaScript, right? Yes, that’s true.

But as of right now WebAssembly has a fairly large limitation, it can’t alter the DOM or call Web APIs directly.

DOM manipulation

In order to manage this current limitation, part of the Blazor framework resides in JavaScript called blazor.webassembly.js file. This part of the framework does three main things:

Loads and initializes the Blazor application in the browser.

Provides direct DOM manipulation so Blazor can perform UI updates.

Provides APIs for JavaScript interop scenarios, which we’ll discuss in detail in later chapters.

It’s possible that in the future this file will no longer be required, this will depend on how fast features are added to WebAssembly and adopted by browsers. But for now, it’s an essential part of the framework.

Now, we’ve cleared that up let’s get back to our booting Blazor app. I want to point out that the server returns all static files. They haven’t required any server-side compilation or manipulation. This means that they can be hosted on any service which offers static hosting, there is no requirement for a .NET runtime to be present on the server. For the first time this opens up free hosting options such as GitHub pages to .NET developers (applies to standalone Blazor WebAssembly applications only).

blazor.boot.json

Once the browser has received all the initial files from the web server it can process them and construct the Document Object Model (DOM). Next, blazor.webassembly.js is executed. This performs many actions but in the context of starting a Blazor WebAssembly app it downloads the blazor.boot.json file. This file essentially contains an inventory of all of the framework and application files which are required to run the app.

Most of these files are normal .NET assemblies, there is nothing special about them and they could be run on any compatible .NET runtime. But there’s also another type of file which is downloaded called dotnet.wasm.

dotnet.wasm

The dotnet.wasm file is in fact a complete .NET runtime, the mono .NET runtime to be exact, which has been compiled to WebAssembly.

At this point in time, only the .NET runtime is compiled to WebAssembly, the framework and application are standard .NET assemblies. In the future a feature called AOT (Ahead Of Time) compiling will be introduced which will allow developers to compile parts of their applications into WebAssembly.

The benefit of this will be performance, any code compiled to WebAssembly will be many times more performant than the interpreted approach used today. However, there’s a tradeoff, and that’s size. AOT compiled code will be bigger than the standard assemblies meaning a larger overall download size for the application.

Once the blazor.boot.json file has been downloaded and the files listed in it have been downloaded, it’s time for the application to be run. The WebAssembly .NET runtime is initialized which in turn loads the Blazor framework and finally the application itself. At this point we have a running Blazor application which exists entirely inside the client’s browser. Aside from requesting additional data (if applicable), there’s no further reliance on the server.

Calculating UI Updates

We now understand how a Blazor WebAssembly application boots up. But how do UI updates get calculated? Just as we did for the initialization process, we’re going to follow a scenario to understand how this happens and what Blazor does.

The process of client-side navigation in Blazor WebAssembly from clicking a link to the application of UI updates

For our scenario we have a Blazor WebAssembly application with two pages, home and counter. Neither of these pages have anything on them except a heading saying either “Home” or “Counter”, respectively. The user is on the home page of the application and is going to click on a link to the go to the counter page. We’ll follow the process Blazor goes through to update the UI from that of the home page to the counter page.

Process explained

When the user clicks on the counter link, the navigation event is intercepted by Blazor on the JavaScript side. This event is then passed over to Blazor on the WebAssembly side and is processed by Blazors router component.

The router checks its routing table for any routable components which match the link the user has attempted to navigate to. In our case, it will find a match with the Counter component and a new instance of that component will be created and the relevant lifecycle methods will be executed.

Once complete Blazor will work out the minimum amount of changes that are required to update the DOM to match that of the Counter component. When this is complete, those changes will be passed back down to the Blazor JavaScript runtime and that will in-turn, apply those changes to the physical DOM. At this point the UI will update the user will be on the Counter page.

All of this has happened client-side in the user browser. There was no need for a server during any point in this process. It’s fair to say that in a real world application, you would probably make a call out to a server to some point in this process. This usually happens during the execution of the lifecycle methods of the component being navigated to in order to load some initial data for the component. But this would depend on the individual application.

Benefits

Now we know a bit more about how the Blazor WebAssembly hosting model works, let talk about the benefits and tradeoffs of choosing this model. Let’s start with the benefits.

Applications run on the client. This means that there is much less load on the server, you can offload much of the work to the client. This could lead to significant cost saving on server infrastructure and improve the scalability of an application.

Can work in offline scenarios. As the app runs entirely inside the browser there’s no need for a persistent connection to the server, making applications more tolerant to unstable network connections. It’s also trivial is enable Progressive Web Application (PWA) functionality. In fact, Blazor WebAssembly has this as an option you can select when creating your application.

Deployed as static files. As Blazor WebAssembly apps are just static files, they can be deployed anywhere static hosting is available. This opens up some options which have never been available to .NET developers historically. Services such as GitHub pages, Netlify, Azure Blob Storage, AWS S3 Buckets, Azure Static Web Sites, are all options for hosting standalone Blazor WebAssembly applications.

Code Sharing. Potentially one of the greatest benefits with Blazor WebAssembly is if you’re using C# on the server. You can now use the same C# objects on your client as you use on the server. The days of keeping TypeScript models in sync with their C# equivalent and vice versa, are over.

Tradeoffs

Of course, nothing is a silver bullet so let’s understand some tradeoffs of this model.

Payload. The initial download size for a Blazor WebAssembly app can be considered quite large. The project template weighs in at around 1.8mb when published. This is largely down to the fact Blazor needs to ship an entire .NET runtime to the client which comes in at around 600kb. However, this is a one-time cost as the runtime and many of the framework assemblies are cached on the first load. Meaning subsequent loads can be a small as a few kb.

Load time. A knock-on effect of the payload size can be load time. If the user’s on a poor internet connection the amount of time required to download the initial files will be higher, which will delay the start of the application, leaving the user with a loading message of some kind. This can be offset slightly by using server-side prerendering, however, while this will give the user something more interesting to look at initially, the app still won’t be interactive until all files have been downloaded and initialized. Server-side prerendering for Blazor WebAssembly apps also requires a ASP.NET Core element on the server, which negates any free hosting options.

Restricted runtime. This is arguably not a tradeoff as such, but for existing .NET developers who are used to having a relatively free rein over the machine their apps run on, it’s something to be aware of. WebAssembly applications run in the same browser sandbox as JavaScript applications. This means, for example, that you will not be allowed to reach out to the users’ machine and do things such access the local file system.

Blazor WebAssembly summarize

To summarize, Blazor WebAssembly is the hosting model to choose if you’re looking for a direct replacement for a JavaScript SPA framework such as Angular, React or Vue. While there are a few tradeoffs to consider, there are some substantial benefits to choosing this model.

Blazor Server

Now we’ve seen how Blazor WebAssembly works, let’s turn our attention to the Server hosting model and see how it differs. Blazor Server was the first production supported hosting model for Blazor, being released around 8 months before the WebAssembly version. As we did with the previous model, we’ll walk through initializing a Blazor Server application to help us understand how things work.

Bootup process of a Blazor Server application

Process begins

The process begins with a request to load the site from the browser. When this request hits the webserver two things could happen, the app is started up, or if the app is already running, a new session is established. Why would the app already be running? Blazor WebAssembly follows the traditional SPA model and runs entirely in the browser, essentially making it like a desktop application. Each user has their own instance of the app which runs locally on their machine. Blazor Server is different, only one instance of the application runs on the server, but it can support many clients. Therefore, the app could already be running, and the new request would just establish a new session.

Process static files

The request is then processed by the application and the initial payload is sent back to the browser. This includes static assets such as CSS and JavaScript files, and images. There is also the initial HTML, but this is compiled rather than static HTML we saw in Blazor WebAssembly. The reason for this is that the hosting page for a Blazor Server application is a Razor Page rather than a static HTML page in the WebAssembly model. The advantage of this is it allows Blazor Server applications to use server-side prerendering out of the box. In fact, this feature is enabled by default when you create this type of Blazor application.

Once the initial payload is returned to the browser the files are processed and the DOM is created – then a file called blazor.server.js is executed. The job of this runtime is to establish a SignalR connection back to the Blazor application running on the server. At this point the application is ready for user interaction.

Calculating UI updates

What happens when a user interacts with the application? We saw earlier that in Blazor WebAssembly the events are processed right there in the browser along with calculating any UI updates and applying them to the DOM. But that can’t happen here as the application is running on the server.

We’ll follow the same scenario as we did with Blazor WebAssembly, we have a Blazor Server application with two pages, home and counter. Neither of these pages have anything on them except a heading saying either “Home” or “Counter”, respectively. The user is on the home page of the application and is going to click on a link to the go to the counter page. We’ll follow the process Blazor goes through to update the UI from that of the home page to the counter page.

Process of updating the UI in Blazor Server

Process explained

The user clicks on the link in the menu and the click event is intercepted by Blazor’s runtime on the client. The runtime then processes the event to understand what has happened. In this case there are two things, a mouse click event and a navigation event, due to it being a hyperlink that was clicked. These two events are then bundled up and sent back to the server over the SignalR connection that was established when the application started.

So, the client sent a the message to the server and the server unpacks and process the message. The Blazor framework then calls any application code necessary. In this case it would instantiate an instance of the counter page component and execute the relevant lifecycle methods.

SignalR

Once complete, Blazor will work out what the minimum amount of changes needed to make the current page transform to the counter page and then send these back to the client via the SignalR connection. Just to be clear, Blazor will not send back an entirely new page to the client. It will only send back the minimum number of instructions needed to update the current DOM to match the Counter page. In our case, the only difference is the heading. Blazor will send back a single instruction to change the text in the heading from “Home” to “Counter”.

DOM

Once back on the client, the client unpacks the changes, and the required changes are applied to the physical DOM. From the user’s perspective, they appear to have navigated to a new page in the application, the counter page. But they are still on the same physical page, it just has a different header.

You may have spotted this already, but the overall process isn’t any different to how Blazor WebAssembly worked, it’s just been stretched out a bit over that SignalR connection. Blazor Server is just as much a SPA as Angular, Vue or Blazor WebAssembly. It just happens to run its logic and calculate UI updates on the server instead of the client. In fact, I would go as far as saying if you were presented with two identical applications, one written in Blazor Server and one in Blazor WebAssembly, you wouldn’t be able to tell the difference between them, as a user.

Performance

Before we talk about benefits and tradeoffs for this model, I want quickly mention performance. With all the network chatter which goes on in this hosting model I’m sure it may have crossed your mind that this might not scale particularly well.

The test

In 2019, the ASP.NET Core team did some testing to establish the performance levels of Blazor Server apps. They setup an application in Azure and tested it on different powered virtual machines, checking the number of active users the application could support. Here are the results.

Standard D1 v2 Instance (1vCPU & 3.5GB Memory). Over 5000 concurrent users

Standard D3 v2 Instance (4vCPU & 14GB Memory). Over 20,000 concurrent users

As you can see, Blazor Server is no slouch when it comes to performance. The main factor they found which effects the number of clients that can be supported is memory. This makes sense as the server needs to keep track of all the clients which are connected to it, the more there are the more information needs to be stored in memory.

Testing

The other major finding from testing was how network latency effected the application. As all interaction are sent back to the server for processing, latency can have a large impact on usability.

If the server is located 250ms away from the client, then each interaction is going to take at least 500ms to be processed as it has to travel to the server (250ms), then be processed, then travel back again (250ms).

Testing found that when the latency went above 200ms then the UI began to feel sluggish and less responsive. As a rough rule you would always want your users to be on the same continent as the server. If you want to have a globally available Blazor Server application, then you need to have your app evenly distributed across the world aiming to keep all clients within 200ms of a server.

Benefits

As we did before, let’s look at the benefits and tradeoffs of choosing a Blazor Server application.

Small payload. As the application is running on the server as opposed to the client, the initial download is significantly smaller. Depending on static assets such as CSS and images a Blazor Server application can be as small as a 100-200kb.

Fast load time. With a much smaller payload the application loads much faster. The server-side prerendering also helps as the user never sees a loading message.

Access to the full runtime. The application code is executing on the server on top of the full .NET runtime. This means that you can do things such as access the servers file system if you require without hitting any security restrictions.

Code security. If you have code which is proprietary, and you don’t want people being able to download and interrogate it then Blazor Server is a good choice. The application code is all executed on the server and only the UI updates are sent to the client. This means your code is never exposed to the client in anyway.

Tradeoffs

Heavy server load. Where Blazor WebAssembly allows us to utilize the power of the client Blazor Server does the complete opposite. Almost all of the work is now being performed by the server. Meaning you might need a larger investment in your infrastructure to support Blazor Server apps.

Doesn’t work offline. Where Blazor WebAssembly takes offline working in its stride Blazor Server does not. The SignalR connection is the lifeline of the application and without it the client can’t function at all. By default, this results in an overlay with a message saying the client is attempting to reestablish the connection. If this fails, the user has to refresh the browser to restart the application.

Latency. Due to its design Blazor Server apps are sensitive to latency issues. Every interaction the user has with the application must be sent back to the server for processing and await any updates that need to be applied. If there is a high latency in the connection between client and server a noticeable lag manifests in the UI and actions quickly feel sluggish. In real numbers a latency above 200ms is going to start causing these issues.

Requires a stable connection. Following on from the need for low latency and tying in with the inability to work offline. Blazor Server apps need to have a stable internet connection. If the connection is intermittent in any way, the user will continually see the reconnecting overlay in their application which quickly becomes very disruptive. An obvious scenario where this could occur is when a user is on a mobile device which has intermittent connection.

Blazor Server summarize

In summary, if you’re looking for a fast loading application and you have users with a fast and stable network connection, then Blazor Server is a great choice.

The post Getting started with C# and Blazor appeared first on PureSourceCode.

from WordPress https://www.puresourcecode.com/dotnet/net-core/getting-started-with-c-and-blazor/

#.NET Core #.NET General #Blazor #C #Microsoft #Visual Studio #WebAPI #blazor #blazor-server

0 notes

holytheoristtastemaker · 5 years ago

Link

In 2020, we are blessed with a number of frameworks and libraries to help us with web development. But there wasn't always so much variety. Back in 2005, a new scripting language called Mocha was created by a guy named Brendan Eich. Months after being renamed to LiveScript, the name was changed again to JavaScript. Since then, JavaScript has come a long way.

In 2010, we saw the introduction of Backbone and Angular as the first JavaScript frameworks and, by 2016, 92 per cent of all websites used JavaScript. In this article, we are going to have a look at three of the main JavaScript frameworks (Angular, React and Vue) and their status heading into the next decade.

For some brilliant resources, check out our list of top web design tools, and this list of excellent user testing software, too.

01. Angular

AngularJS was released in 2010 but by 2016 it was completely rewritten and released as Angular 2. Angular is a full- blown web framework developed by Google, which is used by Wix, Upwork, The Guardian, HBO and more.

Pros:

Exceptional support for TypeScript

MVVM enables developers to separate work on the same app section using the same set of data

Excellent documentation

Cons:

Has a bit of a learning curve

Migrating from an old version can be difficult.

Updates are introduced quite regularly meaning developers need to adapt to them

What's next?

In Angular 9, Ivy is the default compiler. It's been put in place to solve a lot of the issues around performance and file size. It should make applications smaller, faster and simpler.

When you compare previous versions of Angular to React and Vue, the final bundle sizes were a lot a bigger when using Angular. Ivy also makes Progressive Hydration possible, which is something the Angular team showed off at I/O 2019. Progressive Hydration uses Ivy to load progressively on the server and the client. For example, once a user begins to interact with a page, components' code along with any runtime is fetched piece by piece.

Ivy seems like the big focus going forward for Angular and the hope is to make it available for all apps. There will be an opt-out option in version 9, all the way through to Angular 10.

02. React

React was initially released in 2013 by Facebook and is used for building interactive web interfaces. It is used by Netflix, Dropbox, PayPal and Uber to name a few.

Pros:

React uses the virtual DOM, which has a positive impact on performance

JSX is easy to write

Updates don't compromise stability

Cons:

One of the main setbacks is needing third-party libraries to create more complex apps

Developers are left in the dark on the best way to develop

What's next?

At React Conf 2019, the React team touched on a number of things they have been working on. The first is Selective Hydration, which is where React will pause whatever it's working on in order to prioritise the components that the user is interacting with. As the user goes to interact with a particular section, that area will be hydrated. The team has also been working on Suspense, which is React's system for orchestrating the loading of code, data and images. This enables components to wait for something before they render.

Both Selective Hydration and Suspense are made possible by Concurrent Mode, which enables apps to be more responsive by giving React the ability to enter large blocks of lower priority work in order to focus on something that's a higher priority, like responding to user input. The team also mentioned accessibility as another area they have been looking at, by focusing on two particular topics – managing focus and input interfaces.

03. Vue

Vue was developed in 2014 by Evan You, an ex-Google employee. It is used by Xiaomi, Alibaba and GitLab. Vue managed to gain popularity and support from developers in a short space of time and without the backing of a major brand.

Pros:

Very light in size

Beginner friendly – easy to learn

Great community

Cons:

Not backed by a huge company, like React with Facebook and Angular with Google

No real structure

What's next?

Vue has set itself the target of being faster, smaller, more maintainable and making it easier for developers to target native. The next release (3.0) is due in Q1 2020, which includes a virtual DOM rewrite for better performance along with improved TypeScript Support. There is also the addition of the Composition API, which provides developers with a new way to create components and organise them by feature instead of operation.

Those developing Vue have also been busy working on Suspense, which suspends your component rendering and renders a fallback component until a condition is met.

One of the great things with Vue's updates is they sustain backward compatibility. They don't want you to break your old Vue projects. We saw this in the migration from 1.0 to 2.0 where 90 per cent of the API was the same.

How does the syntax of frameworks compare?

All three frameworks have undergone changes since their releases but one thing that's critical to understand is the syntax and how it differs. Let's have a look at how the syntax compares when it comes to simple event binding:

Vue: The v-on directive is used to attach event listeners that invoke methods on Vue instances. Directives are prefixed with v- in order to indicate that they are special attributes provided by Vue and apply special reactive behaviour to the rendered DOM. Event handlers can be provided either inline or as the name of the method.

React: React puts mark up and logic in JS and JSX, a syntax extension to JavaScript. With JSX, the function is passed as the event handler. Handling events with React elements is very similar to handling events on DOM elements. But there are some syntactic differences; for instance, React events are named using camelCase rather than lowercase.

Angular: Event binding syntax consists of a target event name within parentheses on the left of an equal sign and a quoted template statement on the right. Alternatively, you can use the on- prefix, known as the canonical form.

Popularity and market

Let's begin by looking at an overall picture of the three frameworks in regards to the rest of the web by examining stats from W3Techs. Angular is currently used by 0.4 per cent of all websites, with a JavaScript library market share of 0.5 per cent. React is used by 0.3 per cent of all websites and a 0.4 per cent JavaScript library market share and Vue has 0.3 per cent for both. This seems quite even and you would expect to see the numbers rise.

Google trends: Over the past 12 months, React is the most popular in search terms, closely followed by Angular. Vue.js is quite a way behind; however, one thing to remember is that Vue is still young compared to the other two.

Job searches: At the time of writing, React and Angular are quite closely matched in terms of job listings on Indeed with Vue a long way behind. On LinkedIn, however, there seems to be more demand for Vue developers.

Stack Overflow: If you look at the Stack Overflow Developer Survey results for 2019, React and Vue.js are both the most loved and wanted web frameworks. Angular sits down in ninth position for most loved but third most wanted.

GitHub: Vue has the most number of stars with 153k but it has the least number of contributors (283). React on the other hand has 140k stars and 1,341 contributors. Angular only has 59.6k stars but has the highest number of contributors out of the three with 1,579.

NPM Trends: The image above shows stats for the past 12 months, where you can see React has a higher number of downloads per month compared to Angular and Vue.

Mobile app development

One main focus for the big three is mobile deployment. React has React Native, which has become a popular choice for building iOS and Android apps not just for React users but also for the wider app development community. Angular developers can use NativeScript for native apps or Ionic for hybrid mobile apps, whereas Vue developers have a choice of NativeScript or Vue Native. Because of the popularity of mobile applications, this remains a key area of investment.

Other frameworks to look out for in 2020

If you want to try something new in 2020, check out these JavaScript frameworks.

Ember: An open-source framework for building web applications that works based on the MVVM pattern. It is used by several big companies like Microsoft, Netflix and LinkedIn.

Meteor: A full-stack JavaScript platform for developing modern web and mobile applications. It's easy to learn and has a very supportive community.

Conclusion

All three frameworks are continually improving, which is an encouraging sign. Everyone has their own perspective and preferred solution about which one they should use but it really comes down to the size of the project and which makes you feel more comfortable.

The most important aspect is the continued support of their communities, so if you are planning to start a new project and have never used any of the three before, then I believe you are in safe hands with all of them. If you haven't had a chance to learn any of the three frameworks yet, then I suggest making it your New Year's resolution to start learning. The future will revolve around these three.

0 notes

mbaljeetsingh · 5 years ago

Text

Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS

We have big JavaScript frameworks that tons of people already use and like, including React, Vue, Angular, and Svelte. Do we need another JavaScript library? Let’s take a look at Alpine.js and you can decide for yourself. Alpine.js is for developers who aren’t looking to build a single page application (SPA). It’s lightweight (~7kB gzipped) and designed to write markup-driven client-side JavaScript.

The syntax is borrowed from Vue and Angular directive. That means it will feel familiar if you’ve worked with those before. But, again, Alpine.js is not designed to build SPAs, but rather enhance your templates with a little bit of JavaScript.

For example, here’s an Alpine.js demo of an interactive “alert” component.

CodePen Embed Fallback

The alert message is two-way bound to the input using x-model="msg". The “level” of the alert message is set using a reactive level property. The alert displays when when both msg and level have a value.

It’s like a replacement for jQuery and JavaScript, but with declarative rendering

Alpine.js is a Vue template-flavored replacement for jQuery and vanilla JavaScript rather than a React/Vue/Svelte/WhateverFramework competitor.

Since Alpine.js is less than a year old, it can make assumptions about DOM APIs that jQuery cannot. Let’s briefly draw a comparison between the two.

Querying vs. binding

The bulk of jQuery’s size and features comes in the shape of a cross-browser compatibility layer over imperative DOM APIs — this is usually referred to as jQuery Core and sports features that can query the DOM and manipulate it.

The Alpine.js answer to jQuery core is a declarative way to bind data to the DOM using the x-bind attribute binding directive. It can be used to bind any attribute to reactive data on the Alpine.js component. Alpine.js, like its declarative view library contemporaries (React, Vue), provides x-ref as an escape hatch to directly access DOM elements from JavaScript component code when binding is not sufficient (eg. when integrating a third-party library that needs to be passed a DOM Node).

Handling events

jQuery also provides a way to handle, create and trigger events. Alpine.js provides the x-on directive and the $event magic value which allows JavaScript functions to handle events. To trigger (custom) events, Alpine.js provides the $dispatch magic property which is a thin wrapper over the browser’s Event and Dispatch Event APIs.

Effects

One of jQuery’s key features is its effects, or rather, it’s ability to write easy animations. Where we might use slideUp, slideDown, fadeIn, fadeOut properties in jQuery to create effects, Alpine.js provides a set of x-transition directives, which add and remove classes throughout the element’s transition. That’s largely inspired by the Vue Transition API.

Also, jQuery’s Ajax client has no prescriptive solution in Alpine.js, thanks to the Fetch API or taking advantage of a third party HTTP library (e.g. axios, ky, superagent).

Plugins

It’s also worth calling out jQuery plugins. There is no comparison to that (yet) in the Alpine.js ecosystem. Sharing Alpine.js components is relatively simple, usually requiring a simple case of copy and paste. The JavaScript in Alpine.js components are “just functions” and tend not to access Alpine.js itself, making them relatively straightforward to share by including them on different pages with a script tag. Any magic properties are added when Alpine initializes or is passed into bindings, like $event in x-on bindings.

There are currently no examples of Alpine.js extensions, although there are a few issues and pull requests to add “core” events that hook into Alpine.js from other libraries. There are also discussions happening about the ability to add custom directives. The stance from Alpine.js creator Caleb Porzio, seems to be basing API decisions on the Vue APIs, so I would expect that any future extension point would be inspired on what Vue.js provides.

Size

Alpine.js is lighter weight than jQuery, coming in at 21.9kB minified — 7.1kB gzipped — compared to jQuery at 87.6kB minified — 30.4kB minified and gzipped. Only 23% the size!

Most of that is likely due to the way Alpine.js focuses on providing a declarative API for the DOM (e.g. attribute binding, event listeners and transitions).

Bundlephobia breaks down the two

For the sake of comparison, Vue comes in at 63.5kB minified (22.8kB gzipped). How can Alpine.js come in lighter despite it’s API being equivalent Vue? Alpine.js does not implement a Virtual DOM. Instead, it directly mutates the DOM while exposing the same declarative API as Vue.

Let’s look at an example

Alpine is compact because since application code is declarative in nature, and is declared via templates. For example, here’s a Pokemon search page using Alpine.js:

CodePen Embed Fallback

This example shows how a component is set up using x-data and a function that returns the initial component data, methods, and x-init to run that function on load.

Bindings and event listeners in Alpine.js with a syntax that’s strikingly similar to Vue templates.

Alpine: x-bind:attribute="express" and x-on:eventName="expression", shorthand is :attribute="expression" and @eventName="expression" respectively

Vue: v-bind:attribute="express" and v-on:eventName="expression", shorthand is :attribute="expression" and @eventName="expression" respectively

Rendering lists is achieved with x-for on a template element and conditional rendering with x-if on a template element.

Notice that Alpine.js doesn’t provide a full templating language, so there’s no interpolation syntax (e.g. in Vue.js, Handlebars and AngularJS). Instead, binding dynamic content is done with the x-text and x-html directives (which map directly to underlying calls to Node.innerText and Node.innerHTML).

An equivalent example using jQuery is an exercise you’re welcome to take on, but the classic style includes several steps:

Imperatively bind to the button click using $('button').click(/* callback */).

Within this “click callback” get the input value from the DOM, then use it to call the API.

Once the call has completed, the DOM is updated with new nodes generated from the API response.

If you’re interested in a side by side comparison of the same code in jQuery and Alpine.js, Alex Justesen created the same character counter in jQuery and in Alpine.js.

Back in vogue: HTML-centric tools

Alpine.js takes inspiration from TailwindCSS. The Alpine.js introduction on the repository is as “Tailwind for JavaScript.”

Why is that important?

One of Tailwind’s selling points is that it “provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.” That’s exactly what Alpine does. It works inside HTML so there is no need to work inside of JavaScript templates the way we would in Vue or React Many of the Alpine examples cited in the community don’t even use script tags at all!

Let’s look at one more example to drive the difference home. Here’s is an accessible navigation menu in Alpine.js that uses no script tags whatsoever.

CodePen Embed Fallback

This example leverages aria-labelledby and aria-controls outside of Alpine.js (with id references). Alpine.js makes sure the “toggle” element (which is a button), has an aria-expanded attribute that’s true when the navigation is expanded, and false when it’s collapsed. This aria-expanded binding is also applied to the menu itself and we show/hide the list of links in it by binding to hidden.

Being markup-centric means that Alpine.js and TailwindCSS examples are easy to share. All it takes is a copy-paste into HTML that is also running Alpine.js/TailwindCSS. No crazy directories full of templates that compile and render into HTML!

Since HTML is a fundamental building block of the web, it means that Alpine.js is ideal for augmenting server-rendered (Laravel, Rails, Django) or static sites (Hugo, Hexo, Jekyll). Integrating data with this sort of tooling can be a simple as outputting some JSON into the x-data="{}" binding. The affordance of passing some JSON from your backend/static site template straight into the Alpine.js component avoids building “yet another API endpoint” that simply serves a snippet of data required by a JavaScript widget.

Client-side without the build step

Alpine.js is designed to be used as a direct script include from a public CDN. Its developer experience is tailored for that. That’s why it makes for a great jQuery comparison and replacement: it’s dropped in and eliminates a build step.

While it’s not traditionally used this way, the bundled version of Vue can be linked up directly. Sarah Drasner has an excellent write-up showing examples of jQuery substituted with Vue. However, if you use Vue without a build step, you’re actively opting out of:

the Vue CLI

single file components

smaller/more optimized bundles

a strict CSP (Content Security Policy) since Vue inline templates evaluate expressions client-side

So, yes, while Vue boasts a buildless implementation, its developer experience is really depedent on the Vue CLI. That could be said about Create React App for React, and the Angular CLI. Going build-less strips those frameworks of their best qualities.

There you have it! Alpine.js is a modern, CDN-first library that brings declarative rendering for a small payload — all without the build step and templates that other frameworks require. The result is an HTML-centric approach that not only resembles a modern-day jQuery but is a great substitute for it as well.

If you’re looking for a jQuery replacement that’s not going to force you into a SPAs architecture, then give Alpine.js a go! Interested? You can find out more on Alpine.js Weekly, a free weekly roundup of Alpine.js news and articles.

The post Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS appeared first on CSS-Tricks.

via CSS-Tricks https://ift.tt/3aMMDvq

#IFTTT #Feedly

0 notes

recruitmentdubai · 5 years ago

Text

Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS

For example, here’s an Alpine.js demo of an interactive “alert” component.

CodePen Embed Fallback

It’s like a replacement for jQuery and JavaScript, but with declarative rendering

Alpine.js is a Vue template-flavored replacement for jQuery and vanilla JavaScript rather than a React/Vue/Svelte/WhateverFramework competitor.

Since Alpine.js is less than a year old, it can make assumptions about DOM APIs that jQuery cannot. Let’s briefly draw a comparison between the two.

Querying vs. binding

Handling events

Effects

Also, jQuery’s Ajax client has no prescriptive solution in Alpine.js, thanks to the Fetch API or taking advantage of a third party HTTP library (e.g. axios, ky, superagent).

Plugins

Size

Alpine.js is lighter weight than jQuery, coming in at 21.9kB minified — 7.1kB gzipped — compared to jQuery at 87.6kB minified — 30.4kB minified and gzipped. Only 23% the size!

Most of that is likely due to the way Alpine.js focuses on providing a declarative API for the DOM (e.g. attribute binding, event listeners and transitions).