Simply put they allow you to easily write asynchronous programs. Without you ever having to reorganize your code. Which can lead to massive performances increases.
The “async” & “Await” markers are keywords that mark the beginning and end of asynchronous code. Where “async” is put right before a function name, and “await” is put right before calling the function. However if a method is async then it needs to return a Task object.
Now you can use different parts of Task Asynchronous Programming (TAP) model. Such as start a bunch of tasks, and wait for them to finish. Or even call a new task on the completion of another task. All while your main application is running.
How is this possible ? Does it start a bunch of new threads ? Yes and No. If you start a bunch of tasks and wait for them to complete then yes. Where as if you await a heavy task it cuts up everything happening in our program the second it hits an await keyword. And starts executing everything based on the time available on the current thread. So you aren’t able to tell that your programming is waiting around for something.
D = Dependency Inversion Principle
This principle is about making sure you never have to rewrite your core logic. Meaning that if your class or piece of code has a dependency on something else. It should never access it directly. Instead it should go through some intermediary that abstracts the functionality away.
For example if your application talked to a database, you would’t want to be writing SQL statements directly into your code. Or if you were using a ORM (Object Relational Mapper) you would want queries every where. Especially if at some point you decide to move to another database type or ORM. To fix this problem you would need to create a wrapper around it, abstracting complex queries into simple common method calls. Like “Update User profile”, or “Set User Password”.
This way if you ever had to make any changes to the logic of how you accessed the database. You could do it with out changing any of your core application logic. Since your core application wouldn’t directly rely on how the method is implemented. This can also be thought of as always coding to a interface, rather then a direct implementation.
L = Liskov Substitution Principle
This is all about using Object Oriented Programming to its fullest. So what the Wikipedia article says is that: “If S is a sub-type of T then objects of type T maybe replaced with type S”. So what does that mean ?
Well it means that when you create your class hierarchy, and you create your base methods, you have to think about the broader implications. For example if your root parent class was “Bird” it would have methods like “Fly” , “Eat” and “Walk”. And then you would classes like “Hawk” , “Blue Jay”, “Robin”, “Penguin”, and “Ostrich”. Now we should be able to put any of these child classes in place of the parent class, and use them. Can you see the problem ?
The problem is that Penguins and Ostriches can’t fly, which violates the “Liskov Substitution Principle”. You can get around this by instead having the two different children inherit from the “Bird” class: “FlyingBird” and “NonFlyingBird”.
In this series I am going to be going through each of the principles. Go about explaining them in as simple of a manner as possible.
S = Single Responsibility Principle
Anything inside your code that is parts (class, modules, etc) should only ever have one reason to change. For example if you had a Person class, then everything in that class should only do things related to person. A person class should have methods like “eat”, “sleep”, “play”, and etc. However a person should never need to have a “log” method, cause it has nothing to do with a person.
1) Don’t Touch the DOM – Imperative Vs Declarative
Hey don’t touch the DOM ! React will do that for you. You might be wondering what I mean by that. You see React shields you from manually interacting (Imperative) with the DOM using Java Script. Instead React uses something called the “Virtual DOM”. The Virtual DOM is a representation of the actual DOM that React uses to figure out what to actually change on the screen. React will always be like “Oh you made that change ? Let me handle the best way that update“. So when you use React you are using a Declarative way of programming.
2) Hair Balls Vs Lego – Component Architecture
Front end Apps these days are pretty complex, for example take Netflix, Facebook, or AirBnB. They all have complex user interactions and require a large number of cross interacting entities. If you tried to build any one of these applications using vanilla Java-script, and then tried to add more and more features to them, you would end up with a large hair ball of code. That would feature large chunks of CSS, JS, and HTML all over the place. And when anyone ever tried to add a new feature, they would have to copy and past code (the horror !). Components to the rescue ! With components you can encapsulated each and every aspect of your app into little manageable chunks, that can be imported into other parts of your application. Making building new features as easy as building with Lego.
3) One Way Data Flow
Every application has “State“. This can be anything from how many times you clicked a button, to your current permissions inside the app. Now in traditional front end apps this state is spread around different chunks of the app. And are not shareable across different areas of the app. For example if you had a news editor app, it would have to know who has permissions to actually publish the content, and give the user some categories to publish it under.
React deals with this problem by enforcing a centralized state. Once the “State” of the app changes, React automatically reacts and makes the necessary DOM changes to reflect the change. With this centralization you minimize the places where potential bugs show up. And you have a better idea where the bugs are in your application. Since data only flows one through your application, from your “State” to the components.
4) Just the UI
React is a library for building UIs, plain and simple. It does not try to be a large massive framework that has every single feature you could want. Therefor you can just add the extra features you want as third party libraries. This way your app becomes highly customized towards your use, rather than you needing to bend a framework to work the way you want it too.
One of the best ways to get started with programming or help in finding a job is doing side projects. They help you understand what goes into making large feature rich applications.
This article will primarily focus on end user driven projects, i.e projects that anyone can use. This means all these projects will have some focus on building a UI interface.
A website that allows you to get a feed of all your favorite blogs/ YouTube channels.
- You usually need to go to Medium, Dev.To, Hacker News, or individual blogs. why can’t there be a service where it just gives me everything I subscribe to in one big feed ?
Task Management System.
- Instead of using Trello, ToDo List, and Jira, why don’t you make your own mixture of the three ? And have it integration with your favorite calendar of choose.
- Looking for a job these days is pretty spammy. There are a multitude of job boards that have posting after posting, and offer no information other then the post. Most job boards have more features geared towards recruiters, and have non for job seekers. And most of the time you end up have to make a spread sheet to keep all your application organized. Make something that fixes these problems.
- Everyone needs some help looking for a gift. Make a site that scraps Amazon for items, then build a ML model to recommend them to users using affiliate links. Use the information from every recommendation to training the model.
Apply Machine Learning to your domain of choice.
- Are you a Pokemon card nerd ? or a gear head ? Why don’t you make a ML model that can clarify car parts or Pokemon cards , and then deploy it as an API. You might be wonder how you could possibly do that, and its easier then you think. just do the first few course of arguably one the greatest ML course ever: https://course.fast.ai/index.html
Here is a list of things you will end up learning, or have experience in after completing any of the projects:
- How to structure your code
- What Frameworks to use
- How data flows through the application
- What data structures to use
UI – Design:
- How to plan out the interface of the application
- How to build for convince
- Getting better at CSS
- How to save data
- Work with data
- Integrate application logic with data logic
- How to make user accounts
- Stop others from accessing another users content
- Save user passwords
- Understand basic attack vectors – SQL Injection , XSS, CSRF, etc
Getting Better at your Frame Works of Choice