#vue child component communication | Explore Tumblr posts and blogs

incipientinfotech · 3 years ago

Text

The Ultimate Battle: Vue.js vs React

Vue.js and React are two of the most popular JavaScript frameworks that have taken the web development community by storm in recent years. These JavaScript frameworks help developers build complex apps with ease and flexibility, resulting in some of the best user experiences on the web.

However, there are also quite a few differences between them, which makes it difficult to choose one over another. In this comparison, we’ll look at these two frameworks’ features, including their pros and cons, to see which one you should use when building your next app or website.

Why React and Vue? Tools overview

React and Vue are popular JavaScript frameworks for creating user interfaces, however, they have differing design philosophies.

Though less popular than React, this difference makes it easier for designers who may not be as experienced with JS or HTML/CSS to create UIs without having to worry about updating an entire page on each change — making it faster to create reusable components and move around UI elements in a complex app environment.

Similarities Between React js And Vue

Although both frameworks are very different, there are some similarities between them.

Both React and Vue have Virtual DOM that updates the user interface in response to changes in the application data. However, React uses a diffing algorithm to update only the necessary elements, while Vue’s reactivity system re-renders all of its components when an observed value changes.

This means that React is typically faster than Vue when it comes to updating the UI with new data, but it requires more work on the developer’s part to keep track of dependencies between components so as not to accidentally cause unnecessary renders.

Differences Between Reactjs and VueJs

ReactJS and VueJs are two very popular JavaScript frameworks for front-end development. But what’s the difference? Let’s compare them: 1) React is simpler and more popular, but it requires you to use a build system like Webpack or Jest to make full use of it

2) React uses JSX, which allows you to write HTML in your JavaScript code

3) VueJs is more powerful out-of-the-box because it doesn’t require a build system and it has a lot of features that come prebuilt in its core library, such as routing and internationalization (I18N) support. The downside to VueJs is that if you want to customize anything then you’ll need some experience with TypeScript

4) React focuses on being a view layer while Vue concentrates on providing an entire platform that helps developers create interactive UIs

5) One of the biggest differences between React and Vue is how they deal with data binding — when we say data binding, we mean how well they allow developers to tie together their code so different components can interact with each other seamlessly

6) In React, data flows from parent component to child component; whereas in Vue, this process can happen either way

The most popular applications created with React and Vue

There are a lot of different factors that go into choosing a framework, which is why it’s important to compare the two frameworks based on your specific needs and requirements.

VueJS (pronounced view) is often called the progressive framework because it scales from small simple components to large complex single page applications with ease and simplicity.

Built with component-based architecture, interactive features without jQuery, data binding, routing and transitions built in by default, Vue offers flexibility and power for building any application you can imagine.

React is a library for creating user interfaces for web apps or websites using JavaScript and has become popular with developers because of its many benefits when compared to other frameworks like Angular or Ember.

The way it renders the DOM is faster than Angular and uses less memory than both React’s JSSEL engine and Web Components, which means there will be less time spent waiting for things to load.

React also provides a simpler API where changes happen only at one level deep, so updates will be easier as well as allowing you to think about every change as smaller, manageable steps rather than trying to keep track of everything at once.

Vue supports both JSX and virtual DOM rendering while React relies solely on JSX rendering, but both have their pros and cons. The decision ultimately comes down to what works best for you!

Advantages and Disadvantage of ReactJS

ReactJS has a lot of advantages, especially in the field of user interfaces. It’s easy to use and well documented on sites like Stack Overflow, which will help you find answers to your questions quickly and easily. If you know HTML5 and CSS3, then you’ll have an easier time learning React.

You can use JSX syntax with it, which makes it very easy to create complex layouts without having to write a lot of code. It also works well with other libraries like jQuery and Bootstrap because they are both compatible with ES6 (and many are ported to ES6).

While there are many benefits from using ReactJS, there are some disadvantages as well. One thing that is not so great about it is that all the state for your components must be stored in this one object.

There are times when two components need to share data, but unfortunately you cannot pass data from one component to another with ReactJS unless you put that data inside of this object. There are also limitations when it comes to server-side rendering.

One last disadvantage is how difficult it is sometimes to add 3rd party libraries into a project because of how complicated dependencies can get, which might make development slower than what you want it to be if adding more third party packages.

Advantages and Disadvantage of Vue Js

Vue is a user-friendly, easy to learn and fast in performance which makes it perfect for projects of any size and scope. One of the best things about Vue is how well it integrates with other libraries or frameworks, such as jQuery, Angular and Bootstrap.

It is also lightweight, which means that you can use it in a mobile application or on a single page without the need to load large amounts of data into the browser at once.

Finally, one of the biggest advantages is that if you ever decide to switch from Vue to another framework such as React, all your code will still be valid and usable without having to rewrite everything from scratch! Flaws (3+ sentences): Despite being fast and lightweight, Vue does not provide an out-of-the box solution for routing.

In order to take advantage of this functionality, developers must implement their own solution using JavaScript or one of the many plugins available online.

Some might argue that it’s better to wait until we have something more stable than rewriting something every few months when new versions come out because there are few bugs left after all these updates.

However, even though they are there occasionally, bug fixes are usually delivered quickly by the team at Vue so they don’t usually cause too much trouble!

Vue vs React performance

A common misconception is that Vue performs better than React because it doesn’t require a virtual DOM, but this isn’t true. In tests with one thousand items, the difference in performance was a mere 3%.

That said, if you’re using a framework like Angular then you’ll want to go with React since it’s more compatible. If you’re using jQuery or another lightweight library on the other hand, then your decision will depend on your personal preferences.

The two frameworks have different philosophies when it comes to modularity and code reusability, so choose based on what would be most beneficial for your project.

When to choose React or Vue?

React is best for complex data and large projects, while Vue is a better choice for smaller projects that require more flexibility with data binding and templating.

We recommend using React if you have a lot of data to display, but are not sure what the end result will be like; it’s easier to make adjustments in React than in Vue because of the way that templates work.

We recommend using Vue if you want an easy-to-learn framework with less configuration needed to get started, or if you are doing something simple where a single file can contain the whole app.

You should also use Vue if you’re creating a lightweight product within your company, as it doesn’t come with all the overhead of other frameworks.

React uses one-way data flow and views are created by composing elements together with JSX (a JavaScript syntax extension), which makes it seem more complicated at first glance — especially when working on bigger projects.

However, this complexity pays off once developers start working on larger applications; since everything happens in one place, they don’t have to spend time searching through components elsewhere when they need to edit them.

Conclusion

Ultimately, there is no best framework for everyone. You need to weigh the pros and cons of each to decide which is best for you and your project’s needs.

The choice between Vue and React largely depends on what your app does, how much complexity it has, who the audience is, etc. It’s a tough decision that can’t be made in isolation from other factors so take time to research both sides before making a final decision.

Frequently Asked Questions

Is React a framework or library? React is a JavaScript library for building user interfaces, developed by Facebook and open sourced in 2013.

React handles the view layer of your application, leaving you free to concentrate on the rest of your app without worrying about browser compatibility or DOM manipulation.

Why is React better than Vue? React is a more mature library and has a larger community of developers than Vue, which means you’ll find more tutorials, example code and answers to your questions on the internet.

As a result, there are more high-quality components available for React with good documentation.

Why is React better than Vue for bigger web apps? React is the better framework for creating bigger web apps than Vue, because it’s a more mature and well-established framework.

In addition to its age, React has a much steeper learning curve than Vue, which can be daunting for beginners who are just starting out with JavaScript frameworks.

This is in part because React does not use HTML templates like many other JS frameworks do, so developers need to understand more about how the DOM works.

How is Vue different than React? Vue.js takes a more approachable and easy-to-learn approach to building user interfaces. It has a simple two-way binding system, which automatically updates the view whenever the underlying data changes, and vice versa.

With one-way data flow (unidirectional), you can easily understand how data is flowing through your application without having to trace it manually; this makes debugging easier as well!

Which has more industry support React vs Vue? One of the important factors to consider when selecting a framework is the level of industry support it has. It is important to be aware of the community and what they have to say about a framework that you are considering using in your project.

In the case of React and Vue, both frameworks have an established following within their respective communities and are used by millions of people around the world with success.

Originally Source: Vue.js vs React

#reactjs #vuejs #reactjs development #hire reactjs developers #vuejs development #hire vuejs developers

1 note · View note

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

chennee26 · 4 years ago

Text

Simplify Static Asset Management With Vue.js Single-File Component

Static asset management is one of the more painful and mysterious challenges front-end developers face. We want our source code to be simple to develop and maintain, but we rely on browsers to be lean and mean. Browsers can’t be expected to understand our fancy source files with conveniences like Sass or the newest bleeding edge JavaScript features. We configure transpilers, linters, and compressors that watch for source code changes or get triggered by build processes. And finally, these tools emit static assets that a browser can interpret

Even when we don’t use fancy preprocessors, we still copy the source files to a dist directory to deploy them…because…well…it’s just what we do!

On top of this complexity, we have traditionally maintained a separation of concerns between markup, scripting, and styling. This separation can lead to extreme bloat that makes our applications difficult to maintain.

Imagine a request to remove a component from a view. You remove the markup…but can you track down CSS selectors that are specific to this component? All the media queries? Do you feel safe removing code that may affect other parts of the view? What about a request to modify a component’s appearance? Do you add a new class to your updated component and leave the old styling behind, just in case there are other parts of the view that are styled by it? Technical debt accumulates. Eventually, you have a pile of dead code mixed in with the good stuff. It’s very difficult to clean up, and nobody wants to pay for the effort.

Not to imply that your code is inherently bad. It’s a consequence of the separation of concerns that has made the internet look sharp since the W3C adopted CSS in 1996.

So, what are our alternatives? Inline CSS? An occasional inline style attribute is acceptable in the 21st century. But even with CSS-in-JS libraries, this solution can be challenging to scale. We need the cascade. We need media queries.

Many modern frameworks combine JavaScript with markup; it’s the core of the React, Angular, and Vue.js revolution. The concept of “styled components” is also trending. But unification usually comes at a cost. The learning curve, awkward code structure, and dependency on 3rd party libraries may outweigh the advantages. However, Vue’s out-of-the-box support for the concept makes it simple to grasp and implement.

The Vue.js framework Single-File Component (SFC) allows you to combine templating, scripting, and styling in a single source file that can accept props and manage state. Vue CLI — the “beginner” installation of Vue.js — will pre-configure the bridge between your .vue source files and webpack that requires absolutely no configuration or webpack knowledge. Let’s open a terminal and quickly build a working example using npm.

1.Install Vue CLI: npm install -g @vue/cli

2.Create a new project (accept the default settings): vue create vue-sfc-example

3.Start the project: npm run serve

4. Render HelloWorld.vue in a browser: http://localhost:8080

SO easy. Let’s open the source to see what we built.

...some markup...

</div>

</template>

export default {

name: 'HelloWorld',

props: {

msg: String

}

</script>

h3 {

margin: 40px 0 0;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: inline-block;

margin: 0 10px;

}

a {

color: #42b983;

}

</style>

The <template> tag wraps Vue template syntax enhanced markup.

The <script> tag wraps JavaScript.

The <style> tag wraps CSS.

Aside from placing the styling at the end of the file, this source file looks an awful lot like an html file that a browser could interpret. There is a lot going on under the hood, but Vue doesn’t clutter the source with tooling bloat.

Let’s concentrate on the <style> tag. The boilerplate contains some basic CSS, and an attribute named “scoped”. As the code comment implies, this attribute allows you to “scope” this block to only apply to this particular component, by automatically namespacing the CSS. Compare this to a more traditional approach, which might involve creating a selector like: “#hello-world-component-namespace.this-component {...}” in some faraway css file. The scoped attribute is optional. If you want to modify child components, one approach is to exclude the scoped attribute. You may also use multiple blocks of CSS, in case you wish to scope part of the code, but style children with a separate CSS block.

h3 {

margin: 40px 0 0;

}

...

</style>

<style>

#child-component > h3 {

margin: 10px;

}

...

</style>

If you inspect the source code in your browser, you can see this style block rendered in the head of the document:

margin: 40px 0 0;

}

ul[data-v-469af010] {

list-style-type: none;

padding: 0;

}

li[data-v-469af010] {

display: inline-block;

margin: 0 10px;

}

a[data-v-469af010] {

color: #42b983;

}

</style>

There is no need to version or deploy a CSS file, in this example. The data attribute in the first block is no accident. It uniquely identifies the component this styling is scoped to.

Predictably, namespacing is suppressed for code blocks that are not scoped.

#child-component > h3 {

margin: 10px;

}

</style>

An alternative to this approach is the ::v-deep combinator, which allows you to style children from a scoped block. Details can be found here.

But what about my Sass? Good news: SFCs tap into all of your favorite webpack preprocessors. Install sass-loader with npm:

h3 {

margin: 40px 0 0;

}

ul {

list-style-type: none;

padding: 0;

> li {

display: inline-block;

margin: 0 10px;

a {

color: #42b983;

&.very-green {

#00ff00;

}

</style>

But what about my Sass globals, includes, mixins, etc.? Never fear — the Sass block you include in your SFCs works just like your typical Sass source file. You can pass includes, set variables, nest media queries, and any other Sass convenience.

@import "mixins";

@import "global/global";

#main {

padding-top: em(54);

@media (min-width: $screen-md) {

padding-top: 0;

}

</style>

The vue-loader, which is included and pre-configured by Vue CLI, makes all of this work. Sass/Scss, Less, Babel, TypeScript, and other popular preprocessors and linters are supported. These features can be discretely configured, to the delight of advanced users.

The Vue.js SFC offers the convenience our source code deserves, without the file management and webpack tooling headaches. You can also use the component state to set class and style inside your templates, using built-in lifecycle hooks. It is also important to note that you can still include CSS the typical way, or in a mixed mode. This is especially handy when using rapid prototyping libraries like Bootstrap.

What’s the catch? Vue.js is a relatively new player. It’s picking up steam, but there aren’t as many applications using the framework as the competing products — Angular and React. That means the user community is comparably small. Examples are slim and basic. You are cutting your own trail. Also, we have detected some “spookiness” in the way preprocessors react to code structure. The preprocessors may need some configuration and babysitting, once you scale into a larger project.

_________________________________________

0 notes

concettolabs · 5 years ago

Text

Why Use React For Your Business in 2020?

Since the day Facebook has launched React, it has reserved its place in the technology field. It’s getting more popular day by day. In fact, ReactJS is a JavaScript open-source library. It helps developers to build exceptional user interfaces that are high performing.

As per Stack Overflow, 74.5% of developers recommend using ReactJS for web development.

In this competitive world, there are many tools available in the market which help in web and app development. But among all only a few tools are utilized and preferred by the enterprises due to their features. And Facebook’s ReactJS is one of them. Having a plethora of frameworks available these days, it’s not that easy to find a framework that could ultimately not become outdated soon. So, the question that comes to mind is, is there any scalable platform or framework which always strives to remain the best in the world of technology?

Well, after going through some research, as a renowned web and mobile app development company, at Concetto Labs, we have concluded that ReactJS would be the perfect solution for all your needs for now and future.

Reasons to Choose ReactJS for Your Project in 2020

Here, we are going to explain some reasons why some big giants like Facebook, Instagram, and WhatsApp are relying on ReactJS. Many organizations are choosing ReactJs to build interactive, unique, creative, and user-friendly apps. It’s the most suitable for startups, small and large enterprises.

Easy Learning Curve

When we talk about ReactJS, it’s easy to grasp for any JavaScript developer. It’s a very simpler and effective framework. It’s a lightweight JavaScript library and deals only with the view layer.

In fact, it’s the major reason why React gained so much popularity in no time. It helps businesses quickly build their projects without having any troubles. Since it’s easy to learn and understand, it will not take much time for a developer to understand the development process. Hence, it’s human tendency to adapt that technology which is easy to use and learn and avoid things that are difficult to learn.

Moreover, when we compare React with Angular and Vue, React is much easier to learn and especially in the documentation. As a business owner, you can develop applications quickly.

Rich User Interface

While developing an app, every organization focuses on developing rich user interfaces. It has become an important part of app development. If the user interface is designed poorly, then there are high chances of an application to get failed. Moreover, customers always expect more from your website. Hence, it’s also important to meet their expectations without making them wait and affecting other factors. Therefore, it’s become necessary for every business to survive and thrive in the market.

ReactJS allows developers to build an application with user-interfaces that can promise an exceptional user experience. So if you develop an app using ReactJS, then there are better chances that your users will stay on your app and love to use it. You can easily build amazing and intuitive UI using declarative components.

Faster Development

With the help of React, a developer can develop high-quality user interface applications in very little time. Since it has reusable components and other development tools, it allows developers to develop an app at a very faster time. However, you will find readily available React developers tools like a browser extension. This makes coding much better than ever before.

So, if you are planning to develop an amazing website with seamless user experience, but have no time, ReactJS is the perfect solution for you. Moreover, due to its reusability feature, you can save a lot of money as well. This will be your pocket-friendly project.

As a renowned ReactJS development company, our ReactJS developers develop and deliver a web app in no time. So that you can start serving your customers.

Fast Rendering

When you develop a complex, high-load app, it becomes essential to define the structure of the app in the beginning. As it can slow down the performance of the app.

When you use ReactJS, it has its own DOM. Virtual DOM is the representation of DOM that allows testing all changes to the virtual DOM first to calculate the risks with each modification. It’s tree-structured which helps to maintain high app performance and guarantees a better user experience.

In this way, ReactJS avoids costly DOM operations and does updates in an efficient manner.

SEO Friendly

Search engine optimization opens the door to success for any online business. But many of the JavaScript frameworks are not search engine friendly.

As per the Moz, the lower the page load time and the faster the rendering speed. This will help an app to rank on search engines.

But surprisingly, ReactJS stands out among other frameworks. Due to its virtual DOM, it will reduce the page load time, which adheres to the Google algorithm. This secures its first position on Google Search Engine Result Page.

Useful Developer Toolset

Leveraging emerging technologies and implementing them in projects can be beneficial, but only if used correctly.

Facebook has understood the concept and added React dev tools and Chrome dev tools in their ReactJS framework. ReactJS comes up with many benefits from a developer’s perspective. The React tools basically help developers discover child and parent components. It also observes component hierarchies and inspects their present state and props.

Strong Community Support

It’s the place where you never feel that you are left alone. Because the React community is very huge and extremely helpful when you get stuck with any problems. It’s the main reason that React documentation is getting better day by day. Every issue or bug you report will be solved immediately.

Being an open-source library, ReactJS has formed its strong community to support budding ReactJS developers. You will find plenty of tutorials, articles, blogs, and many other useful resources on the internet.

Apart from this, React experts keep helping the community by clearing other’s doubts, solving queries, and answering questions on groups, QA Platforms like Stack Overflow, Reddit, and Quora.

Conclusion

So, with this, we hope, we have made your mind clear that why ReactJS would be the next choice for your project. Moreover, it comes with a bonus mobile application development platform called React native. And with it, you can build top-class cross-platform applications.

Definitely, React is a high-quality framework and is worthy of your attention. So what are you still waiting for?

Hire ReactJS developers from Concetto Labs and develop a high-quality app for your project. As an experienced ReactJS development Company, Concetto Labs helps organizations to deliver quality and flexible ReactJS development services across the world.

Hire React JS Developers to get started today!

#Hire React JS Developers

0 notes

motherfucking-russia · 5 years ago

Text

Watch Directv

AT&T‘s Internet-streaming live TV service will soon be specific to the Chrome browser, assuming you favour to circulation for your computer or computing device. Users are reporting seeing a message when trying to move on PC that advises them to download and install Google Chrome, pronouncing its miles vital with the intention to get the ‘best streaming revel in.’ You have till the give up of this month to make the transition.

If you subscribe to DirecTV NOW and also you log into your account on a PC's browser, you’ll be greeted with a message that asserts, in component, ‘DirecTV NOW will stay solely on Google Chrome while accessed through your laptop.’ The word goes on to give an explanation for that the provider will drop its support for Internet Explorer and Safari ‘after June.’

This trade simplest impacts folks that try and watch the carrier from a computing device browser; the service is viewable thru a devoted app while watching from a cellphone or pill. Presumably, as soon as the aid is dropped, folks that try and get admission to the provider the usage of Explorer or Safari could be directed to download Chrome before getting access to the video content material.

The organization has no longer revealed why it's far making this modification — except to say that Chrome will in a few ways offer the excellent viewing enjoy — and it hasn’t but updated any of its assist pages to indicate the upcoming change, which is a chunk ordinary. Regardless, you've got approximately 3 weeks left to make the transition…either to Chrome or to an extraordinary OTT video carrier. Competing products consist of PlayStation Vue, Sling TV, and Hulu Live TV.

WHAT IS DIRECTV APP FOR PC

Directv is a premium subscription-based satellite tv carrier issuer which becomes began in 1994. The company has been successfully completed its 23 years. At Directv, you could subscribe tv and audio offerings. It makes use of satellite transmission to offer their offerings to their customers. Its audio and tv services are confined to the United States, Latin America, and the Caribbean. It doesn’t provide their offerings international.

OTHER PRODUCTS OFFERED BY DIRECTV

Direct broadcast satellite tv for pc

Pay Television

Pay-in line with-view

Internet Television

Owner AT&T

Read Kinemaster for PC

SUBSCRIPTION OFFERED BY THE DIRECTV

Local tv stations

broadcast television networks

Subscription-based total tv offerings

Satellite radio services

private video services

HOW TO WATCH DIRECTV ON PC

If you're one that loves looking movies and TV suggests so that you must strive the Directv which help you get right of entry to movies and indicates anytime & anywhere if you have a working internet connection.

Below we're sharing how you may start taking part in the content of Directv on a Home windows PC (Computer)

Visit here DIRECTV entertainment website

Now faucet “watch online”

It will carry you the listing of films, simply select one

Enjoy

Features of Directv APK

Watch Favorite shows and films

It gives its customers the element to watch their boundless fav serials and films which customers can see Live or On-Demand. Another extra element is to get the Data Free TV which allows viewing DIRECTV on the gadgets, without utilising the patron’s net facts. Besides, customers should purchase into the top-notch channels which permit viewing the maximum latest content.

Recording

Directv gives a highlight of recording the fav serials and movies from anyplace in order that viewers don’t pass over out on their favourite content material and can view it every time as consistent with their requirements.

Read MainStage 3 for PC Download Free

Total Control

This component permits its customers to use their devices to pause, play, and rewind the serials and films which can be streaming on their TV. At the point when somebody wishes to search for a show, the subscriber can actually communicate out and voice seek highlight can help discover exactly what clients are trying to find. At that point, they can even arrange it to reveal consequences on the TeleVision. Most importantly, Users can set parental controls and respect large serenity over what their children are viewing.

Easy Interface

It is having an exceedingly easy to make use of interface which makes your work excessively truthful. The on-hand channels incorporate every one of the channels immediately from the child’s quarter to adults.

More info Clicks Helpsforpc.com

0 notes

solaceinfotechpvtltd · 6 years ago

Text

Top 3 Javascript (Js) Frameworks for 2019

JavaScript is a multi-worldview language. This language supports functional, event-driven and also imperative programming. Javascript was initially used for client-side. But nowadays it is used for server side programming also. In simple manner, JavaScript is a language of web.

What is Javascript ? And why to use?

JavaScript frameworks are among the most favored platforms for web development. A software framework is a deliberation in which software providing generic functionality can be specifically changed by extra user-written code. JavaScript framework is an application framework written in javascript. Here programmers can manipulate the functions and also use them according to their requirements. Frameworks are adaptable for designing websites. Hence they are used by most of the programmers. JS frameworks are a kind of tool that works with Javascript easier and smoother also. Frameworks helps programmer to code the application according to the responsiveness of the device. This is the main reason for JavaScript of being popular. Let’s see best JS frameworks in 2019.

Best JavaScript Frameworks in 2019-

1. React.js-

This framework is created by Facebook engineer Jordan Walke and launched in 2013. React is highly efficient and declarative. JavaScript library used for building interactive user interfaces. This framework is used to create reusable user interface components for each state that can automatically update and render data without the need of reloading the page. Actually React is a library, not technically a framework. It is used to handle “View” layer in the MVC model for web and mobile apps. React can also be used to create native mobile application supported by both android and ios. With such a great amount to offer, React JS ruled 2018 over different frameworks and also React JS will keep on commanding in 2019 as well. 475k websites on the web are powered by React.

Pros of

React.js

–

Rich community-

React has large community on GitHub and is more than any other frameworks.

High performance-

React is popular for its high efficiency and also flexibility. It can be integrated with other frameworks without any issue. Also it can be used for both client and server side.

Large amount of resources-

React is maintained by Facebook, so there is huge availability of documentation and resources available on the web. This makes learning curve easy than AngularJS.

Unidirectional Data Flow-

Unidirectional data flow of react helps to ensure that any changes made to child element structure don’t affect the parent element structure.

Easy to maintain components-

React helps to reuse the code and also eases the maintenance of large scale projects.

2. Angular-

Angular is a front end web applications framework based on typescript. AngularJS was launched in 2010 while Angular 2 launched in 2016. It is one of the oldest modern JavaScript framework that allows users to build dynamic interactive websites. Regardless of being the oldest, it is still considered as a developer’s first choice. Hence it is one of the top JavaScript framework for 2019. This framework allows developers to build efficient and robust single page applications instead of HTML websites. Angular 2 introduced component-based architecture, improved dependency injection, logging service and inter-component communication also. While version 7 introduces improvements in performance, Angular material & CDK, dependencies for typescripts version 3.1, Node version 10. 350k websites on the web are powered by AngularJS/ Angular 2+ versions.

Pros of Angular-

Native mobile app- Angular enables development of native mobile apps for both ios and android.

Data binding- Apart from 2-way binding, angular 2 and beyond support 3 other types of data-binding namely – one-way property binding, event binding and interpolation also.

Abundant resources and support- Google offers a rich treasure trove of resources and rolls out new updates and improvements every 6 months.

Support for Progressive web applications- Angular is the first framework to integrate features for development of progressive web applications.

Cons of Angular-

Knowledge of MVC- For using angular it is necessary to have a detailed understanding of model view controller architecture.

Large learning curve- As compared to the three top JavaScript front-end frameworks, Angular has the steepest learning curve and suffers from a very high rate of abandonment. A large base of angular users has moved to Vue and react.

Difficult Syntax- Angular has made a big leap in terms of syntax complexity after adopting TypeScript in Angular2 and beyond. It poses a steep learning curve for anyone making a transition from vanilla JS or jQuery.

3. Vue-

read more at- https://solaceinfotech.com/blog/top-3-javascript-js-frameworks-for-2019/

#javascript #frameworks #programming #web development

0 notes

kavindius · 6 years ago

Text

Introduction to Client-Side Development

Introduction to client-side elements

Distributed systems use client-side elements, so that users can interact with.

The client-side elements include,

Views – what user see

Controller – contain event handlers for the views

Client-model – business logic and data

View Development

Browser-based clients’ Views comprises two main elements

Content – HTML

Formatting – CSS

HTML

HTML Elements

o Structural elements – header, footer, nav, aside

o Text elements – headings, paragraphs, line breaks

o Images

o Hyperlinks

o Data representational elements – Lists, Tables

o Form elements – Input, Radio buttons, Check boxes, Buttons

CSS (Cascading Style Sheets)

Used to decorate or format content.

Advantages:

Reduce HTML formatting tags

Easy modification

Faster loading

Save lot of work and time

Three main selectors of CSS

Element Selector

- Selects elements based on the name

ID Selector

- Uses the id attribute of HTML element to select a specific element

Class Selector

- Selects elements with a specific class attribute

Advanced selectors

Pseudo Classes Pseudo Elements

:link first-letter

:visited first-line

:hover first-child

Specificity:

Specificity is, which browser decide which css property values are the most relevant to an element and, therefore, will be applied.

Specificity is a weight that is applied to a given css declaration determined by the number of each selector type in the matching selector.

The following list of selector types increases by specificity

1. Type selector and pseudo elements

2. Class selectors, attribute selectors and pseudo classes

3. ID selectors

CSS Advanced features

Web fonts - Allow you to use custom fonts other than device fonts

Colors, gradients, backgrounds

Transformations and animations

Media

Media queries

Media queries can be used to check many things.

- Width and height of the viewport

- Width and height of the device

- Orientation

- Resolution

Can be used as

o Inline CSS

o Internal CSS sheets

o External CSS sheets

Inline CSS

Advantages:

Inline CSS can be used for many purposes, some of which include:

Testing: Many web designers use Inline CSS when they begin working on new projects, this is because its easier to scroll up in the source, rather than change the source file. Some also using it to debug their pages, if they encounter a problem which is not so easily fixed. This can be done in combination with the Important rule of CSS.

Quick-fixes: There are times where you would just apply a direct fix in your HTML source, using the style attribute, but you would usually move the fix to the relevant files when you are either able, or got the time.

Smaller Websites: The website such as Blogs where there are only limited number of pages, using of Inline CSS helps users and service provider.

Lower the HTTP Requests: The major benefit of using Inline CSS is lower HTTP Requests which means the website loads faster than External CSS.

Disadvantages

Inline CSS some of the disadvantages of which includes:

Overriding: Because they are the most specific in the cascade, they can over-ride things you didn’t intend them to.

Every Element: Inline styles must be applied to every element you want them on. So if you want all your paragraphs to have the font family “Arial” you have to add an inline style to each <p> tag in your document. This adds both maintenance work for the designer and download time for the reader.

Pseudo-elements: It’s impossible to style pseudo-elements and classes with inline styles. For example, with external and internal style sheets, you can style the visited, hover, active, and link color of an anchor tag. But with an inline style all you can style is the link itself, because that’s what the style attribute is attached to.

Internal CSS

Advantages

Since the Internal CSS have more preference over Inline CSS. There are numerous advantages of which some of important are an under:

Cache Problem: Internal styles will be read by all browsers unless they are hacked to hide from certain ones. This removes the ability to use media=all or @import to hide styles from old, crotchety browsers like IE4 and NN4.

Pseudo-elements: It’s impossible to style pseudo-elements and classes with inline styles. With Internal style sheets, you can style the visited, hover, active, and link color of an anchor tag.

One style of same element: Internal styles need not be applied to every element. So if you want all your paragraphs to have the font family “Arial” you have to add an Inline style <p> tag in Internal Style document.

No additional downloads: No additional downloads necessary to receive style information or we have less HTTP Request

Disadvantages

Multiple Documents: This method can’t be used, if you want to use it on multiple web pages.

Slow Page Loading: As there are less HTTP Request but by using the Internal CSS the page load slow as compared to Inline and External CSS.

Large File Size: While using the Internal CSS the page size increases but it helps only to Designers while working offline but when the website goes online it consumers much time as compared to offline.

External CSS

Advantages

There are many advantages for using external CSS and some of are:

Full Control of page structure: CSS allows you to display your web page according to W3C HTML standards without making any compromise with the actual look of the page.

Reduced file-size: By including the styling of the text in a separate file, you can dramatically decrease the file-size of your pages. Also, the content-to-code ratio is far greater than with simple HTML pages, thus making the page structure easier to read for both the programmer and the spiders.

Less load time: Today, when Google has included the Loading time in his algorithm, its become more important to look into the page loading time and another benefit of having low file-size pages translates into reduced bandwidth costs.

Higher page ranking: In the SEO, it is very important to use external CSS. In SEO, the content is the King and not the amount of code on a page. Search engines spider will be able to index your pages much faster, as the important information can be placed higher in the HTML document. Also, the amount of relevant content will be greater than the amount of code on a page. The search engine will not have to look too far in your code to find the real content. You will be actually serving it to the spiders “on a platter”.

There are many frameworks/libraries/plugins to support view development

o They dynamically generate HTML+CSS code

o In server and/or client side

o May have JS-based advanced interactive features

Other tools

jQuery - A JS library, but can be seen a framework too

jQuery UI - Focus on GUI development

Bootstrap - To rapidly design and develop responsive web pages and templates

Angular - A JS framework/platform to build frontend applications

React – A JavaScript library for building user interfaces

Templates are used to maintain consistency across pages in the web site/application.

Template engines are available for both server and client sides

Client-side (JS-based) template engines - NUNJUCKS, PUG, MUSTACHE.JS, HANDLEBARS

Server-side template engines - Twig, jTwig, Thymeleaf, Apache Velocity

Plug-ins

Plug-ins are mainly to add widgets to the Views

Component Development

Browser-based clients’ components comprises two main aspects

Controllers

Client-model

The components of browser-based clients are developed using JS/JS-based frameworks, libraries, and plugins.

Main features of client-side development tools

o DOM processing (dynamic content generation, change, removal)

o Data processing

o Data persistence

o Session management

o Communication

JS6 (JavaScript6)

Also called ECMAScript6

New features

JavaScript let

- The let statement allows you to declare a variable with block scope.

JavaScript const

- The const statement allows you to declare a constant

Exponentiation (**)

- The exponentiation operator (**) raises the first operand to the power of the second operand.

Default parameter values

- Default parameter values allows function parameters to have default values.

Array.find()

- The find() method returns the value of the first array element that passes a test function.

- function takes 3 arguments:

The item value

The item index

The array itself

Array.findIndex()

- The findIndex() method returns the index of the first array element that passes a test function.

- function takes 3 arguments:

The item value

The item index

The array itself

Web workers

This API is meant to be invoked by web application to spawn background workers to execute scripts which run in parallel to UI page

Web storage / Session storage

This is for persistent data storage of key-value pair data in Web clients.

GeoLocation

Identify the device location

File API

Handle the local files

Image capturing

Use local hardware

Top JS frameworks/ libraries

jQuery - Basic and simple. Cover the complexity of JS and provides cross-browser compatibility.

React - powers Facebook, Ease of Learning, DOM Binding, Reusable Components, Backward Compatibility

Angular - Support for Progressive Web Applications, Build Optimizer, Universal State Transfer API and DOM, Data Binding and MVVM

Vue – light weight, with a much-needed speed and accuracy

Generic client-side features

Form/ data validation

Dynamic content generating/updating

Some business logic

Delta communication

References

https://www.w3schools.com/css/css_syntax.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

https://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/

https://www.w3schools.com/js/js_es6.asp

0 notes

laravelvuejs · 6 years ago

Text

Props in Vuejs Components - Use props for parent child communication - Vuejs tutorials - Tutorial 25 - VueJs

Props in Vuejs Components – Use props for parent child communication – Vuejs tutorials – Tutorial 25 – VueJs

[ad_1]

[DISCOUNTED] Master CSS Grid Course: https://bit.ly/2NONxxE

Props in Vuejs Components – Props are really useful when we want to communicate with vuejs child component. We can pass data from parent to child component as prop. Because we may want to pass multiple data rather than…

View On WordPress

1 note · View note

mbaljeetsingh · 7 years ago

Text

How to Build Complex, Large-Scale Vue.js Apps With Vuex

It's so easy to learn and use Vue.js that anyone can build a simple application with that framework. Even novices, with the help of Vue's documentation, can do the job. However, when complexity comes into play the things get a bit more serious. The truth is that multiple, deeply nested components with shared state can quickly turn your application into an unmaintainable mess.

The main problem in a complex application is how to manage the state between components without writing spaghetti code or producing side effects. In this tutorial you'll learn how to solve that problem by using Vuex: a state management library for building complex Vue.js applications.

What is Vuex?

Vuex is a state management library specifically tuned for building complex, large-scale Vue.js applications. It uses a global, centralized store for all the components in an application taking advantage of its reactivity system for instant updates.

The Vuex store is designed in such a way that it is not possible to change its state from any component. This ensures that the state can only be mutated in a predictable manner. Thus your store becomes a single source of truth: every data element is only stored once and is read-only to prevent the application's components from corrupting the state that is accessed by other components.

Why Do You Need Vuex?

You may ask: Why I need Vuex at first place? Can I just put the shared state in a regular JavaScript file and import it in my Vue.js application?

You can, of course, but compared to a plain global object Vuex store has some significant advantages and benefits:

The Vuex store is reactive. Once components retrieve a state from it, they will reactively update their views every time the state changes.

Components cannot directly mutate the store's state. The only way to change the store's state is by explicitly committing mutations. This ensures every state change leaves a trackable record which makes the application easier to debug and test.

You can easily debug your application thanks to the Vuex integration with Vue's DevTools extension.

The Vuex store gives you a bird's eye view on how everything is connected and affected in your application.

It's easier to maintain and synchronize the state between multiple components, even if component hierarchy changes.

Vuex makes direct cross-components communication possible.

If some component is destroyed, the state in Vuex store will remain intact.

Getting Started With Vuex

Before we get started I want to make clear several things: First, to follow along this tutorial you need to have a good understanding of Vue.js and its components system, or at least minimal experience with the framework.

Also, the aim of this tutorial is not to show you how to build actual complex application; the aim is to focus your attention more on Vuex concepts and how you can use it to build complex applications. For that reason, I'm going to use very plain and simple examples without any redundant code. Once you fully grasp the Vuex concepts you will be able to apply them on any level of complexity.

Finally, I'll be using ES2015 syntax. If you are not familiar with it, you can learn it here.

And now, let's get started!

Setting Up a Vuex Project

The first step to get started with Vuex is to have Vue.js and Vuex installed on your machine. There are several ways to do that but we'll use the easiest one. Just create an HTML file and put the needed CDN links:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" />  </head> <body>  <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vuex"></script> <script> // Put the Vue code here </script> </body> </html>

I use some CSS to make the components look nicer, but you don't need to worry about that CSS code. It only helps you to gain a visual notion about what is going on. Just copy and paste the following inside the <head> tag:

Now, let's create some components to work with. Inside the <script> tag, right above the closing </body> tag, put the following Vue code:

Vue.component('ChildB',{ template:` <div class="child childB"> <h1> Score: </h1> </div>` }) Vue.component('ChildA',{ template:` <div class="child childA"> <h1> Score: </h1> </div>` }) Vue.component('Parent',{ template:` <div id="parent"> <childA/> <childB/> <h1> Score: </h1> </div>` }) new Vue ({ el: '#app' })

Here, we have a Vue instance, a parent component, and two child components. Each component have a heading "Score:" where we'll output the app state.

The last thing you need to do is to put a wrapping <div> with id="app" right after the opening <body>, and then place the parent component inside:

So, the preparation work is done. We're ready to move on.

Exploring Vuex

State Management

In real life we deal with complexity by using strategies to organize and structure the content we want to use. We group related things together in different sections, categories, etc. Just as how in a book library, the books are categorized and put in different sections so that we can easily find what we are looking for. The same is true for Vuex. It arranges the application data and logic related to state in four groups or categories: state, getters, mutations, and actions.

State and mutations are the base for any Vuex store:

state is an object that holds the state of the application data.

mutations is also an object containing methods which affect the state.

Getters and actions are like logical projections of state and mutations:

getters contains methods used to abstract the access to the state, and to do some preprocessing jobs, if needed (data calculating, filtering, etc.)

actions are methods used to trigger mutations and execute asynchronous code.

Let's explore the following diagram to make the things a bit clear:

In the left side, we have an example of Vuex store, which we'll create later on in this tutorial. In the right side, we have a Vuex workflow diagram, which shows how the different Vuex elements work together and communicate each another.

In order to change the state, a particular Vue component must commit mutations (eg. this.$store.commit('increment', 3)), and then, those mutations change the state (score becomes 3). After that, the getters are automatically updated thanks to Vue's reactive system and they render the updates in the component's view (with this.$store.getters.score).

Mutations cannot execute asynchronous code, because this would make it impossible to record and track the changes in debug tools like Vue DevTools. To use asynchronous logic you need to put it in actions. In this case a component first will dispatch actions (this.$store.dispatch('incrementScore', 3000)) where the asynchronous code is executed, and then those actions will commit mutations, which will mutate the state.

Create a Vuex Store Skeleton

After we explored how Vuex work, let's create the skeleton for our Vuex store. Put the following code above the ChildB component registration:

const store = new Vuex.Store({ state: { }, getters: { }, mutations: { }, actions: { } })

To provide global access to the Vuex store from every component we need to add the store property in the Vue instance:

new Vue ({ el: '#app', store // register the Vuex store globally })

Now, we can access the store from every component with this.$store variable.

So far, if you open the project with CodePen in the browser, you should see the following result.

State Properties

The state object contains all of the shared data in your application. Of course, if needed, each component can have its own private state too.

Imagine that you want to build a game application and you need a variable to store the game's score. So, you put it in the state object:

state: { score: 0 }

Now, you can access the state's score directly. Let's go back to the components and reuse the data from the store. In order to be able to reuse reactive data from the store's state, you should use computed properties. So, let's create a score() computed property in the parent component:

computed: { score () { return this.$store.state.score } }

In parent component's template put the expression:

<h1> Score: </h1>

And now, do the same for the two child components.

Vuex is so smart that it will do all the work for us to reactively updates the score property whenever the state changes. Try to change the score's value and see how the result updates in all of the three components.

Creating Getters

It is, of course, good that you can reuse the this.$store.state keyword inside the components, as you saw above. But imagine the following scenarios:

In a large-scale application, where multiple components access the state of the store by using this.$store.state.score, you decide to change the name of score. This means that you have to change the name of the variable inside each and every component that uses it!

You want to use a computed value of the state. For example, let's say you want to give the players a bonus of 10 points when the score reaches 100 points. So, when the score hits 100 points, 10 points bonus are added. This means each component has to contain a function that reuses the score and increment it with ten. You will have repeated code in each component, which is not good at all!

Fortunately, Vuex offers a working solution to handle such situations. Imagine the centralized getter that accesses the store's state and provides a getter function to each of the state's items. If needed, this getter can apply some computation to the state's item. And if you need to change the name of some of the state's properties, you only change them in one place, in this getter.

Let's create a score() getter:

getters: { score (state){ return state.score } }

A getter receives the state as its first argument, and then uses it to access the state's properties.

Note: Getters also receive getters as the second argument. You can use it to access the other getters in the store.

In all components, modify the score() computed property to use the score() getter instead of state's score directly.

computed: { score () { return this.$store.getters.score } }

Now, if you decide to change the score to result you need to update it only in one place: in the score() getter. Try it out in this CodePen!

Creating Mutations

Mutations are the only way allowed to change the state. Triggering changes simply means committing mutations in component methods.

A mutation is pretty much an event handler function that is defined by name. Mutation handler functions receive a state as a first argument. You can pass an additional second argument too, which is called the payload for the mutation.

Let's create a increment() mutation:

mutations: { increment (state, step) { state.score += step } }

Mutations cannot be called directly! To perform a mutation, you should call the commit() method with a name of the corresponding mutation and possible additional parameters. It might be just one, as is the step in our case, or they might be multiple wrapped in an object.

Let's use the increment() mutation in the two child components by creating a method named changeScore():

methods: { changeScore (){ this.$store.commit('increment', 3); } }

We are committing a mutation instead of changing this.$store.state.score directly, because we want to explicitly track the change made by the mutation. This way we make our application logic more transparent, traceable and easy to reason about. In addition, it makes it possible to implement tools, like Vue DevTools or Vuetron, that can log all mutations, take state snapshots, and perform time-travel debugging.

Now, let's put the changeScore() method into use. In each template of the two child components, create a button and add a click event listener to it:

<button @click="changeScore">Change Score</button>

When you click the button, the state will be incremented by three, and this change will be reflected in all components. Now we have effectively achieved direct cross-components communication, which is not possible with the Vue.js built-in "props down, events up" mechanism. Check it out in our CodePen example.

Creating Actions

An action is just a function that commit a mutation. It changes the state indirectly which allows for executing of asynchronous operations.

Let's create a incrementScore() action:

actions: { incrementScore: ({ commit }, delay) => { setTimeout(() => { commit('increment', 3) }, delay) } }

Actions get the context as first parameter, which contains all methods and properties from the store. Usually we just extract the parts we need by using ES2015 argument destructing. The commit method is one we need very often. Actions also get a second payload argument, just like mutations.

In the ChildB component modify the changeScore() method:

methods: { changeScore (){ this.$store.dispatch('incrementScore', 3000); } }

To call an action we use dispatch() method with a name of the corresponding action and additional parameters just as with mutations.

Now, the "Change Score" button from ChildA component will increment the score by three. The identical button from ChildB component will do the same, but after 3 seconds delay. In the first case we execute synchronous code and we use a mutation, but in the second case we execute asynchronous code and we need to use an action instead. See how it all works in our CodePen example.

Vuex Mapping Helpers

Vuex offers some useful helpers which can streamline the process of creating state, getters, mutations, and actions. Instead of writing those functions manually we can tell Vuex to create them for us. Let's see how it works.

Instead of writing the score() computed property like this:

computed: { score () { return this.$store.state.score } }

We just use the mapState() helper like this:

computed: { ...Vuex.mapState(['score']) }

And the score() property is created automatically for us.

The same is true for the getters, mutations, and actions.

To create the score() getter we use mapGetters() helper:

computed: { ...Vuex.mapGetters(['score']) }

To create changeScore() method we use mapMutations() helper like this:

methods: { ...Vuex.mapMutations({changeScore: 'increment'}) }

When used for mutations and actions with payload argument, we must pass that argument in the template where we define the event handler:

<button @click="changeScore(3)">Change Score</button>

If we want changeScore() to use an action instead of a mutation we use mapActions() like this:

methods: { ...Vuex.mapActions({changeScore: 'incrementScore'}) }

Again, we must define the delay in the event handler:

<button @click="changeScore(3000)">Change Score</button>

Note: All mapping helpers return an object. So, if we want to use them in combination with other local computed properties or methods we need to merge them into one object. Fortunately with the object spread operator (...) we can do it without using any utility.

In our CodePen you can see an example of how all mapping helpers are used in practice.

Making the Store More Modular

It seems that the problem with complexity constantly obstructs our way. We solved it before by creating Vuex store, where we made the state management and components communication easy. In that store we have everything in one place, easy to manipulate and easy to reason about. However, as our application grows this easy to manage store file becomes larger and larger, and, as a result, harder to maintain. Again, we need some strategies and techniques for improving the application structure by returning it to its easy to maintain form. In this section, we'll explore several techniques which can help us in this undertaking.

Using Vuex Modules

Vuex allows us to split the store object into separate modules. Each module can contain its own state, mutations, actions, getters, and other nested modules. After we create the needed modules, we register them in the store.

Let's see it in action:

const childB = { state: { result: 3 }, getters: { result (state) { return state.result } }, mutations: { increase (state, step) { state.result += step } }, actions: { increaseResult: ({ commit }, delay) => { setTimeout(() => { commit('increase', 6) }, delay) } } } const childA = { state: { score: 0 }, getters: { score (state) { return state.score } }, mutations: { increment (state, step) { state.score += step } }, actions: { incrementScore: ({ commit }, delay) => { setTimeout(() => { commit('increment', 3) }, delay) } } } const store = new Vuex.Store({ modules: { scoreBoard: childA, resultBoard: childB } })

In the above example, we created two modules, one for each child component. The modules are just plain objects, which we register as scoreBoard and resultBoard in the modules object inside the store. The code for childA is the same as that in the store from the previous examples. In the code for childB we add some changes in values and names.

Let's now tweak ChildB component to reflect the changes in the resultBoard module.

In ChildA component the only thing we need to modify is the changeScore() method:

Vue.component('ChildA',{ template:` <div class="child childA"> <h1> Score: </h1> <button @click="changeScore()">Change Score</button> </div>`, computed: { score () { return this.$store.getters.score } }, methods: { changeScore () { this.$store.dispatch('incrementScore', 3000); } } })

As you can see, splitting the store into modules makes it much more lightweight and maintainable, while still keeps its great functionality. Check out the updated CodePen to see it in action.

Namespaced Modules

If you want or need to use one and the same name for particular property or method in your modules, then you should consider namespacing them. Otherwise you may observe some strange side effects, such as executing all the actions with same names, or getting the wrong state's values.

To namespace a Vuex module you just set the namespaced property to true.

const childB = { namespaced: true, state: { score: 3 }, getters: { score (state) { return state.score } }, mutations: { increment (state, step) { state.score += step } }, actions: { incrementScore: ({ commit }, delay) => { setTimeout(() => { commit('increment', 6) }, delay) } } } const childA = { namespaced: true, state: { score: 0 }, getters: { score (state) { return state.score } }, mutations: { increment (state, step) { state.score += step } }, actions: { incrementScore: ({ commit }, delay) => { setTimeout(() => { commit('increment', 3) }, delay) } } }

In the above example we made the property and method names the same for the two modules. And now we can use a property or method prefixed with the name of the module. For example, if we want to use the score() getter from the resultBoard module, we type it like this: resultBoard/score. If we want the score() getter from the scoreBoard module, then we type it like this: scoreBoard/score.

Let's now modify our components to reflect the changes we made.

Vue.component('ChildB',{ template:` <div class="child childB"> <h1> Result: </h1> <button @click="changeResult()">Change Result</button> </div>`, computed: { result () { return this.$store.getters['resultBoard/score'] } }, methods: { changeResult () { this.$store.dispatch('resultBoard/incrementScore', 3000); } } }) Vue.component('ChildA',{ template:` <div class="child childA"> <h1> Score: </h1> <button @click="changeScore()">Change Score</button> </div>`, computed: { score () { return this.$store.getters['scoreBoard/score'] } }, methods: { changeScore () { this.$store.dispatch('scoreBoard/incrementScore', 3000); } } })

As you can see in our CodePen example, we can now use the method or property we want and get the result we expect.

Splitting the Vuex Store Into Separate Files

In the previous section, we improved the application structure to some extent by separating the store into modules. We made the store cleaner and more organized, but still all of the store code and its modules lie in one and the same big file.

So the next logical step is to split the Vuex store in separate files. The idea is to have an individual file for the store itself and one for each of its objects, including the modules. This means having separate files for the state, getters, mutations, actions, and for each individual module (store.js, state.js, getters.js, etc.) You can see an example of this structure at the end of the next section.

Using Vue Single File Components

We've made the Vuex store as modular as we can. The next thing we can do is to apply the same strategy to the Vue.js components too. We can put each component in a single, self-contained file with a .vue extension. To learn how this works you can visit the Vue Single File Components documentation page.

So, in our case, we'll have three files: Parent.vue, ChildA.vue, and ChildB.vue.

Finally, if we combine all three techniques we'll end up with the following or similar structure:

├── index.html └── src ├── main.js ├── App.vue ├── components │ ├── Parent.vue │ ├── ChildA.vue │ ├── ChildB.vue └── store ├── store.js ├── state.js ├── getters.js ├── mutations.js ├── actions.js └── modules ├── childA.js └── childB.js

In our tutorial GitHub repo you can see the completed project with the above structure.

Recap

Let's recap some main points you need to remember about Vuex:

Vuex is a state management library, which help us to build complex, large-scale applications. It uses a global, centralized store for all the components in an application. To abstract the state we use getters. Getters are pretty much like computed properties and are ideal solution when we need to filter or calculate something on runtime.

Vuex store is reactive and components cannot directly mutate the store's state. The only way to mutate the state is by commiting mutations, which are synchronous transactions. Each mutation should perform only one action, must be as simple as possible, and only responsible for updating just a piece of state.

Asynchronous logic should be encapsulated in actions. Each action can commit one or more mutations, and one mutation can be committed by more than one action. Actions can be complex but they never change the state directly.

Finally, modularity is the key to maintainability. To deal with complexity and make our code modular we use the "divide and conquer" principle and the code splitting technique.

Conclusion

So folks, that's it. You already know the main concepts behind Vuex and you are ready to start applying them in practice.

For the sake of brevity and simplicity, I omitted intentionally some details and features of Vuex, so you'll need to read the full Vuex documentation to learn everything about Vuex and its feature set.

via Envato Tuts+ Code https://ift.tt/2sWamFE

#IFTTT #Feedly

0 notes

siliconwebx · 7 years ago

Text

Using Event Bus to Share Props Between Vue Components

By default, communication between Vue components happen with the use of props. Props are properties that are passed from a parent component to a child component. For example, here’s a component where title is a prop:

<blog-post title="My journey with Vue"></blog-post>

Props are always passed from the parent component to the child component. As your application increases in complexity, you slowly…

View On WordPress

#Ahmedabad #Cloud Hosting #CSS Tricks #Domain Search #India #MBK Team #Silicon URL #Silicon Web Design #Web Development #Web Site #WPBeginner #WPEngine #YouTube Videos

0 notes

mobappdevelopmentcompany · 5 years ago

Text

Why ReactJS is an Ultimate Choice for Front-end Development?

When it comes to choosing the technology for front-end development, a host of efficient options are available in the market. But amongst these, ReactJS Frontend development has come up as the most popular and performance-oriented option. Some of the most popular websites like Netflix, Paypal, Apple to name a few use React.JS due to the flexibility and vast amount of capabilities that it offers. Businesses exploring for such capabilities should consider working with a ReactJS App development Company or they can go for ReactJS developers who work as freelancers.

A Bit about ReactJS

ReactJS is a flexible open-source library of JavaScript for building interactive user interfaces for web applications. Rendering happens on the server-side for ReactJS. This library is managed by Facebook and the community of developers. It facilitates the ReactJS developers to create UI components that are reusable. With the help of these reusable components, data in the application can be displayed without the need of reloading the page, for example, count of likes, dislikes can be reflected instantaneously without the need of refreshing the page. This feature facilitates the ReactJS Developers to build complex new-age interfaces and scalable web applications.

Why ReactJS is Widely Used for Frontend Development?

Performance-centric and efficient: ReactJS is one of those frontend technologies which facilitate performance-based development. ReactJS provides server-side rendering and a virtual DOM program that facilitates fast, reliable, and robust performance. Also, the apps built in ReactJS are quite easier to maintain and update. DOM operations which are costly are avoided by ReactJS thereby making these operations efficient. One other factor that contributes to its efficiency is the JSX syntax that makes the process of writing components for websites much easier.

Outstanding Agility: ReactJS can make use of virtual DOM to make changes at the top layer without being worried about the crashing of the application. It is based on the concept of components that enables seamless functioning with other libraries and frameworks too.

Faster Development: ReactJS web apps can be developed at a faster rate due to various reasons.

Debugging process in ReactJS Development is very fast, thereby speeding up the process to build the app.

The component-based or Modular approach helps to focus on building individual components and then combining them to build the entire application.

ReactJS package is small and hence can be quickly downloaded and installed.

Code-splitting feature helps to load only the features which are required currently by the user thereby improving the loading time of web application.

Reusable components save the efforts of developing everything from scratch.

Captivating UI: This library accords the power of creating complicated yet attractive user interfaces to frontend web developers. Declarative components in ReactJS imparts a modern-day look and feel to the UI.

Customization: ReactJS uses JSX syntax which is an optional extension that allows writing of requisite components as per the specific requirements of the clients or end-users. These components accept HTML quoting and allow the ReactJS developers to render the subcomponents with ease.

High Stability: ReactJS uses a downward data flow making it a more stable framework. When any changes are made in the child structure, the parent structure is not affected. So when the developers want to make any modifications in an object, they can modify the state, make the changes and only then update it. This procedure makes the code and the apps stable.

Vibrant Community to Support: React.JS is blessed by the support of a powerful community of Facebook experts as well as other developers from all corners of the world. They often contribute to make it a better frontend technology. They deliver free-tutorials, blogs, articles, etc. to enrich it and provide crucial guidance to anyone facing technical issues while development.

Easy to Learn: It has an easy learning curve as compared to other libraries like Vue, Angular, etc. Anyone with basic knowledge of JavaScript can learn all the ins and out of React.JS with ease. So even new learners can start working on it.

SEO-friendly: SEO has become a crucial component in today’s era of online marketing. ReactJS supports this as it ensures faster rendering speeds and high responsiveness in the apps. This increases their chance of ranking higher in the search engines making it an SEO-friendly framework.

Conclusion:

We hope this article has helped you gain important insights into why React.JS is a great library for frontend development. Owing to its enormous potential, React.JS has earned a significant place in the software world. Some Tech Leaders also claim that it has an extremely bright future. With this, we come to the end.

Are you looking for developing high-performing scalable ReactJS Apps for your business? Get in touch with Biz4Solutions, a well-established ReactJS app development services in Texas. We have provided our cutting-edge frontend development services to several clients using ReactJS. Contact Now!

#reactjs development

0 notes

deepfinds-blog · 7 years ago

Text

Using Event Bus to Share Props Between Vue Components

<blog-post title="My journey with Vue"></blog-post>

Props are always passed from the parent component to the child component. As your application increases in complexity, you…

View On WordPress

#Bus #components #event #Props #share #Vue

0 notes

t-baba · 8 years ago

Photo

Getting Started with React: A Beginner’s Guide

In this guide, I'll show you the fundamental concepts of React by taking you through a practical, step-by-step tutorial on how to create a simple Message App using React. I'll assume you have no previous knowledge of React. However, you'll need at least to be familiar with modern JavaScript and NodeJS.

React is a remarkable JavaScript library that's taken the development community by storm. In a nutshell, it's made it easier for developers to build interactive user interfaces for web, mobile and desktop platforms. One of its best features is its freedom from the problematic bugs inherent in MVC frameworks, where inconsistent views is a recurring problem for big projects. Today, thousands of companies worldwide are using React, including big names such as Netflix and AirBnB. React has become immensely popular, such that a number of apps have been ported to React --- including WhatsApp, Instagram and Dropbox.

Prerequisites

As mentioned, you need some experience in the following areas:

functional JavaScript

object-oriented JavaScript

ES6 JavaScript Syntax

On your machine, you'll need:

a NodeJS environment

a Yarn setup (optional)

If you'd like to take a look first at the completed project that's been used in this guide, you can access it via GitHub.

[affiliate-section title="Recommended Courses"][affiliate-card title="The Best Way to Learn React for Beginners" affiliatename="Wes Bos" text="A step-by-step training course to get you building real world React.js + Firebase apps and website components in a couple of afternoons. Use coupon code 'SITEPOINT' at checkout to get 25% off." url="http://ift.tt/2tF1ast" imageurl="http://ift.tt/2y2HI7v"][/affiliate-section]

What is React?

React is a JavaScript library for building UI components. Unlike more complete frameworks such as Angular or Vue, React deals only with the view layer. Hence, you'll need additional libraries to handle things such as data flow, routing, authentication etc. In this guide, we'll focus on what React can do.

Building a React project involves creating one or more React components that can interact with each other. A React component is simply a JavaScript class that requires the render function to be declared. The render function simply outputs HTML code, which is implemented using either JSX or JavaScript code. A React component may also require additional functions for handling data, actions and lifecyle events.

React components can further be categorized into containers/stateful components and stateless components. A stateless component's work is simply to display data that it receives from its parent React component. It can also receive events and inputs, which it passes up to its parent to handle. A React container or stateful component does the work of rendering one or more child components. It fetches data from external sources and feeds it to its child components. It also receives inputs and events from them in order to initiate actions.

Understanding the React DOM

Before we get to coding, you need to be aware that React uses a Virtual DOM to handle page rendering. If you're familiar with jQuery, you know that it can directly manipulate a web page via the HTML DOM. In a lot of use cases, this direct interaction poses little to no problems. However, for certain cases, such as the running of a highly interactive, real-time web application, performance often takes a huge hit.

To counter this, the concept of the Virtual DOM was invented, and is currently being applied by many modern UI frameworks including React. Unlike the HTML DOM, the Virtual DOM is much easier to manipulate, and is capable of handling numerous operations in milliseconds without affecting page performance. React periodically compares the Virtual DOM and the HTML DOM. It then computes a diff, which it applies to the HTML DOM to make it match the Virtual DOM. This way, React does its best to ensure your application is rendered at a consistent 60 frames per second, meaning that users experience little or no lag.

Enough chitchat! Let's get our hands dirty …

Start a Blank React Project

As per the prerequisites, I assume you already have a NodeJS environment setup. Let's first install or update npm to the latest version.

$ npm i -g npm

Next, we're going to install a tool, Create React App, that will allow us to create our first React project:

$ npm i -g create-react-app

Navigate to your project's root directory and create a new React project using the tool we just installed:

$ create-react-app message-app … Success! Created message-app at /home/mike/Projects/github/message-app Inside that directory, you can run several commands: yarn start Starts the development server. yarn build Bundles the app into static files for production. yarn test Starts the test runner. yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd message-app yarn start Happy hacking!

Depending on the speed of your internet connection, this might take a while to complete if this is your first time running the create-react-app command. A bunch of packages gets installed along the way, which are needed to set up a convenient development environment --- including a web server, compiler and testing tools.

Navigate to the newly created message-app folder and open the package.json file.

{ "name": "message-app", "version": "0.1.0", "private": true, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1", "react-scripts": "1.0.12" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

Surprise! You expected to see a list of all those packages listed as dependencies, didn't you? Create React App is an amazing tool that works behind the scenes. It creates a clear separation between your actual code and the development environment. You don't need to manually install Webpack to configure your project. Create React App has already done it for you, using the most common options.

Let's do a quick test run to ensure our new project has no errors:

$ yarn start Starting development server… Compiled successfully! You can now view message-app in the browser. Local: http://localhost:3000/ On Your Network: http://10.0.2.15:3000/ Note that the development build is not optimized. To create a production build, use yarn build.

If you don't have Yarn, just substitute with npm like this: npm start. For the rest of the article, use npm in place of yarn if you haven't installed it.

Your default browser should launch automatically, and you should get a screen like this:

One thing to note is that Create React App supports hot reloading. This means any changes we make on the code will cause the browser to automatically refresh. For now, let's first stop the development server by pressing Ctrl + C. This step isn't necessary, I'm just showing you how to kill the development server. Once the server has stopped, delete everything in the src folder. We'll create all the code from scratch so that you can understand everything inside the src folder.

Introducing JSX Syntax

Inside the src folder, create an index.js file and place the following code in it:

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));

Start the development server again using yarn start or npm start. Your browser should display the following content:

This is the most basic "Hello World" React example. The index.js file is the root of your project where React components will be rendered. Let me explain how the code works:

Line 1: React package is imported to handle JSX processing

Line 2: ReactDOM package is imported to render React components.

Line 4: Call to render function

<h1>Hello World</h1>: a JSX element

document.getElementById('root'): HTML container

The HTML container is located in public/index.html file. On line 28, you should see <div id="root"></div>. This is known as the root DOM because everything inside it will be managed by the React DOM.

JSX (JavaScript XML) is a syntax expression that allows JavaScript to use tags such as <div>, <h1>, <p>, <form>, and <a>. It does look a lot like HTML, but there are some key differences. For example, you can't use a class attribute, since it's a JavaScript keyword. Instead, className is used in its place. Also, events such as onclick are spelled onClick in JSX. Let's now modify our Hello World code:

const element = <div>Hello World</div>; ReactDOM.render(element, document.getElementById('root'));

I've moved out the JSX code into a variable named element. I've also replaced the h1 tags with div. For JSX to work, you need to wrap your elements inside a single parent tag. This is necessary for JSX to work. Take a look at the following example:

const element = <span>Hello,</span> <span>Jane</span;

The above code won't work. You'll get a syntax error telling you must enclose adjacent JSX elements in an enclosing tag. Basically, this is how you should enclose your elements:

const element = <div> <span>Hello, </span> <span>Jane</span> </div>;

How about evaluating JavaScript expressions in JSX? Simple, just use curly braces like this:

const name = "Jane"; const element = <p>Hello, {name}</p>

… or like this:

const user = { firstName: "Jane", lastName: "Doe" } const element = <p>Hello, {user.firstName} {user.lastName}</p>

Update your code and confirm that the browser is displaying "Hello, Jane Doe". Try out other examples such as { 5 + 2 }. Now that you've got the basics of working with JSX, let's go ahead and create a React component.

Continue reading %Getting Started with React: A Beginner’s Guide%

by Michael Wanyoike via SitePoint http://ift.tt/2f3OnKa

#CSS3 #HTML5 Branding #HTML5 Weekly #HTMLl5 demos #Javascript Branding #Javascript Weekly #Mobile #Mo

0 notes