Why should you consider using React with Material UI? Well, Google’s Material Design has taken over the internet and you might be considering adding it to your next project…
In this article, we’re going to focus on React and Material design. We’re going to talk about –
- The basics of Material Design?
- Should you add Material Design to your React project?
- The best Material Design libraries you can use with React.
We’ve got a demo with 3 Material UI design libraries. Read on…
You’re here because you want to learn how to improve the angular performance of your web application. Your client would like to see the app load quickly on their rusty computers and you’re not sure what you should do.
You’re in the right place.
You might measure size improvements in megabytes and performance improvements in milliseconds.
Large applications will benefit most. But, small applications will see significant angular performance improvements too.
Alright, time to take end to end testing to the next level.
If you’re new to end to end testing, our previous article is a good place to start. It will help you understand why you need e2e testing and how you can get started.
This article takes things to the next level. We’ll talk about –
- Different end to end testing frameworks and which one you should choose.
- Reducing test rigidity and flakiness using the Page Object model design pattern.
- Protractor’s element explorer for playing around and debugging.
We also have a simple demo application for you to play with.
Moving forward we’re assuming you’re already familiar with Protractor’s syntax. If not, have a look at Protractor’s API.
“What is a Custom Component in Angular?”
We get this question ALL the time. It’s time to address it through this article.
By the end of this article, you’ll know a lot more about –
- Custom Components
- How they are different from Regular Components
- How you can create your own Custom Components in Angular
- Best practices for writing Custom Components
If you read till the end of the article, we also have a little something for you. This special something changed the way I structured my applications.
So what’s new in Angular 4? Do not worry, your existing application code is not useless, and you don’t need to learn a new framework all over again.
The good news is that Angular 4 is almost exactly the same as Angular 2, from a development point of view. Most of the changes are “in” the framework. Upgrading is as simple as installing the new dependencies. But more on that later…
Angular 4 is going to be faster, much faster, and according to the Angular team up to 60% smaller applications.
Before we talk about how all this works, let’s answer the question you have…
What happened to Angular 3?
In this article, you’ll learn how to connect your Angular application to a backend service or API.
You’ll learn about –
- The HTTP protocol and how our application will use it to communicate with the server.
- Observables and how you can use them to make async requests.
- A teeny tiny bit of RxJS – map, and catch.
- Angular’s HTTP service.
- Protecting your app from CSRF (Cross Site Request Forgery).
Now even though that may sound like a lot of work, it isn’t a bad thing! These tools and high-level frameworks can save you a lot of time and trouble.
Today we’ll talk about TypeScript and how you can work with it’s types.
“Data-driven web applications”. That’s what most of us are building. That means our application takes in data, processes it and then displays the processed (and / or raw) data in some form.
If you’ve been developing websites for a while, you’ve probably had to deal with DOM manipulations of some sort. These DOM manipulations aren’t straightforward and the code that we end up with isn’t very pretty. Libraries like jQuery made DOM manipulation easier, but the resulting code still looks clunky.
Displaying data isn’t the only challenging task. Dealing with user inputs and updating values can become tiring very quickly.
That’s exactly why we have front-end frameworks like Angular. They make it easier for us to mainpulate and bind data.
Recently, we spoke about the basics of Angular router. We covered everything from configuring angular router to adding basic routes to your application. If you’re just getting started with Angular 2 routing, glance over the other article.
We’ve equipped our users with the ability to move around our application. They can see different components based on the route they are on. We can link our users to different parts of our application with
RouterLink and highlight those links when the route is active with
We’ve also covered how to add routes in child modules instead of having a massive
But there is so much more in a data-driven application. Many applications move from list view to item view – where a user selects one item from a list and is shown the details of that item in a new route. This means we need to figure out how to send arguments in our routes and read them in the components.
Strap your coding gloves on, because we’ll be covering that and a lot more!
Angular router simply allows users to move through different parts of your application as they interact with it.
Angular router works just like your web browser.
Think about how you interact with your browser – you go to different URLs to see different websites and you can move backward and forward through your browser history. The only difference in Angular is that you’re moving the user through different components within your single page application.
Now that you know the bare bone basics of Angular’s Router, it’s time to play with some code.
All applications have some amount of asynchronous code. Imagine if you had to wait for every application on your computer to complete a task before you could do something else.
What if you had to wait for all the posts to load on Facebook before you could see your Facebook home page.
That’s just not how the internet works. Everything is asynchronous. Google Analytics is asynchronously tracking your every move as you read this article…
When we started to learn to code, we were taught to write in a particular way or style. In Angular, you have to use different types of directives as part of the language. Today we are showing you three ways on how to use those different types of directives.
Covalent UI is a powerful open-source UI Platform by Teradata. It combines a design language with a powerful web framework, built on Angular & Angular Material Design.
But where does it fit in the development life-cycle? Well, every day, hundreds of software companies strive to improve their products. As developers, engineers, and managers, we are faced with so many challenging decisions such as coming to terms on app architecture, structuring teams, delivering new features or fixing a bunch of annoying bugs.
We don’t complain. We love it!
Thanks to thousands of open source projects, writing code has never been better. There are so many packages that we can just pull into projects. We no longer need to reinvent the wheel.
But we still need to answer a few fundamental questions when we start off with any new project:
Which framework should we use?
How should our app be structured?
How can we ensure consistent UI across our products?
End to end testing is a somewhat polarized subject in software engineering.
While, some argue against it with valid points, we still think they are an important tool to have under our belt. In this article, we will go over a few of the other testing ways, and dig deeper into the why, and how of end to end testing for Angular 2 applications.
Before we dig deep if you aren’t familiar with the different levels of testing, here’s a quick overview.
Well, let’s lay down some facts. The Angular team has been on the forefront of this innovation. They have been one of the pioneers in providing the framework to build large scale applications. It now embraces the move to ES6 and TypeScript, and it’s here to stay.
But the fear and concern are still understandable. Adopting and upgrading to Angular 2 can be a big undertaking. Specially if you are responsible for an entire codebase.
There are so many issues that can pop up when switching to Angular 2 in a production environment. So the question we need to ask ourselves is –
“Is upgrading to Angular 2 worth it?”
Testing is important to building solid, production-ready applications. Today we’ll be discussing Angular 2 Testing.
We all know, having a solid test setup is crucial to know if our applications are functioning. Without a doubt we will introduce a bug when adding functionality, and usual – we’ll find out too late.
Often times we’ll skip testing because it takes a lot of work. It’s sometimes harder to write our tests than actually writing the code. Who wants to write tests anyway when we know they are going to break in the first place?
But we’re sold on testing. Testing is vital to the health of a solid system. By the end of this article, you’ll see how quick and easy it is to get started with Angular 2 testing. Continue Reading…
AngularJS 2.0 Final Release is finally here. We have been patiently waiting on this version of AngularJS to hit ever since the first alpha was announced.
The official release of Angular 2 is great news for all the teams that are building applications, but specially for those who have been waiting for this release to happen.
If you are one of the many who had breaking changes through the beta phases of AngularJS, you’re in luck. We should not expect to have any more large changes that will break your code.
There’s been a huge shift in the modern stack, a new architecture for building large web applications, functional, immutable benefits in large scale applications, the move to components ES6 and TypeScript. In a nutshell a different way of managing data and a new way of thinking.
Angular 2 is all in on it. Continue Reading…
Your quality of life is literally in the hands of those who contribute to the open source community.
It’s easy to take for granted our current level of modernity. Look around you, your life is deeply influenced by technology that is in its infancy. But where does it all come from?
You might say, large corporations and government. But you’re wrong. Continue Reading…