Crystal Pigeon Blog Management

Terms like front-end and back-end development may be confusing to someone who is new to the world of coding and software engineering. Let’s clear up some of the ambiguity around some of these technical phrases. We’ll explain the differences between the front-end and back-end.

Today, we’re addressing the following issues and demystifying the distinctions between development styles:

• What is front-end development? 
• What is back-end development? 
• What differences exist between front-end and back-end development

Front-end development

Front-end developers create with the user in mind. Front-end development is a type of computer programming that focuses on the coding and building of website/app parts and functionality that will be visible to the user. It is focused on ensuring that the aesthetic parts of a mobile application are functioning. 

Back-end functionality in mobile apps can sometimes be stored locally rather than on the server. These programs are generally offline, which means they may be downloaded and used without an internet connection. In this case, mobile developers would be responsible for both the front-end and the back-end.

Consider the front-end to be the “client-side” of an application. Assume you’re a front-end developer. This implies that your job is to code and bring the visual parts of a mobile app to life. You’d be more concerned with what a person sees when they visit a website or utilize an app. You’d also want to make sure the user interface (UI) is simple to use and runs properly, and that the user experience (UX) is desirable.

These developers bring the visual concepts created by UX and UI designers to life, ensuring that the website or an app performs properly for the user.

Things front-end developers do:

• Improving the user experience.
• Creating mobile applications.
• Bringing concepts to life with Android studio and Kotlin (for android apps), Xcode and Swift (for iOS apps), HTML, JavaScript, and CSS (for web).
• Creating and updating the user interface.
• Using design on mobile apps or websites.
• Developing technologies to improve site interaction across browsers.
• Managing the workflow of the software.
• Following excellent SEO tactics.
• Bug fixes and usability testing

Back-end development

Back-end development deals with the aspect of the website that visitors do not see. It is what allows a website to be interactive. The back-end of a website is sometimes known as the “server side.” 

Assume you own and operate a social networking platform. You’ll need a convenient location to save all of your users’ information. A database is a type of storage center, and some popular examples are Oracle, SQL Server, and MySQL. A database is managed by a server, which is effectively a remote computer. A back-end developer will assist in the management of this database and the site information stored on it. This guarantees that your social networking website’s front-end features continue to function properly when visitors view posted material and other user profiles.

​​While visitors do not directly contact the back-end of a website, they will interact with things that these developers are working on via a front-end application. Back-end development is concerned with storing and organizing data while also ensuring that the front-end works properly.

Things front-end developers do:

• Database development, integration, and management
• Frameworks for developing server-side software on the back-end
• Technologies used in web servers
• Integration of Cloud Computing
• Server-side programming languages
• System software
• Development, deployment, and maintenance of content management systems
• API interoperability
• Cyber security.
• Reporting entails the creation of analytics and data.
• Technologies for backing up and restoring website files and databases

Front and back-end developers use different technologies

A programming language will be used while you code. These languages, like human languages, enable programmers to communicate with their computers using a set of symbols (referred to as code). Simply explained, it’s the same as giving your computer instructions. Front-end developers use programming languages such as XML, Kotlin, and Swift for mobile development, and HTML, CSS, and JavaScript for web development.

• XML is an acronym for Extensible Markup Language.XML tags define data and are used to store and organize information. XML is utilized in Android to implement UI-related data, and it is a lightweight markup language that does not make the layout heavy.
• Kotlin is a trendy, contemporary programming language. Kotlin may be used for server-side, client-side web, and Android programming.
• Swift is an extremely powerful and user-friendly programming language for iOS, iPadOS, macOS, tvOS, and watchOS. Swift code is interactive and enjoyable to write, and the syntax is compact yet expressive.
• HTML is an acronym for Hyper Text Markup Language. It is the most often used markup language for constructing web pages.
• CSS is an acronym for Cascading Style Sheets. CSS is used to provide style and flare to a webpage, whereas HTML is used to establish structure. It specifies the colors, fonts, and style of other site content.
• JavaScript is a programming language that may be used to make a website dynamic and entertaining. For example, you might use it to host a game on your website.

Front-end developers use their own frameworks and libraries. A front-end developer could deal with the following frameworks and libraries:

• Native Android
• Native iOS
• Non-Native mobile frameworks (Swiftic, Native Scripts, React Native, Xamarin, Flutter)
• AngularJS
• React.js
• jQuery
• Sass

PHP, C++, Java, Ruby, Python, JavaScript, and Node.js are some of the languages used by back-end developers. Here’s some more information about a handful of these languages:

• PHP is a scripting language used on the server.
• Java is a well-known platform and computer language.
• Python is a multi-purpose programming language. It differs from some of the others described here in that it may be used for other types of software development as well as web development.

Back-end frameworks include the following:

• Express
• Django
• Rails
• Laravel
• Spring

Summary

Front-end development is a branch of programming that focuses on the visual parts of a website or app with which a user would interact (the client side). Meanwhile, back-end development is concerned with the aspect of a website and app that visitors do not see (the server side). They collaborate to develop dynamic websites and apps that allow users to make purchases, use contact forms, and engage in any other interactive activities while perusing a site. Netflix, PayPal, Facebook, Youtube, etc. are all instances of dynamic websites/apps.

A lot of people these days consider a career in tech. A good salary, substantial job opportunities, a relatively low barrier to entry, and the possibility of remote work attract many people.

I know it looks scary to get into coding if you don’t have any knowledge and experience, but in reality, you need 3 to 6 months to become a “job-ready” programmer. You need almost no investment, except for your time and a few tools – a computer and a smartphone.

The first problem is deciding what career path to take. Should you get into web, mobile, frontend, backend, game development, machine learning, or blockchain? It’s hard to choose when you don’t have any knowledge. It is precisely for this reason that I wrote this article, to help you find your way and facilitate your path to success.

Where to start?

First, you should decide what technology interests you the most. It can be a couple of different technologies, and in the end, you can choose only one. If you don’t know what technology interests you, you can experiment. For example, you can try something out for a week or two and see if it looks interesting to you.

When I wanted to get into coding my interests were around the web and mobile development because I had ideas for websites and mobile apps. These ideas are going to keep you learning, they are going to give you motivation and purpose, and they are going to be the “finish line” (of your first race). Without this, you may find yourself wandering without a goal, and you can lose motivation quickly.

The second most important thing is to check for the market. You need to check if there are open job positions for the technology you want to learn. If you want to learn web or mobile development, you won’t have this problem, but if you are interested in some other technologies situation may be different.

The third thing is the size of the salary. Programmer salaries are above average, but some technologies are better paid than others.

In my situation, I have chosen mobile development (android) over web development because of three reasons:

1. More jobs
   
   There are more jobs for android developers since the market is less saturated with mobile developers than web developers. You can still get a job as a web developer without a problem, but mobile developers are more in demand.
   
   
2. More money
   
   Because of this scarcity of mobile developers, the salary size is much larger. Mobile developer salary is one of the bigger ones on the market, with around 50%-60% higher on average compared to web developer salary in the US.
   
   
3. You can make a finished product
   
   As a mobile developer, you can make a fully functional app by yourself, front and backend, meaning that you can make a fully finished product and sell it on the market. With frontend web development you don’t have a finished product. You will either need to learn the backend and become a full stack developer, which can take a lot of time, or find someone to do the backend.

Using similar logic, you can find what suits you best.

The learning process

When you have found your desired technology, it is time to start with the learning process, which is the hardest part, because you will need around six months of learning to become a job-ready developer, and while learning, you will get no reward (pay). That‘s why many people are struggling with the motivation to learn.

Remember this: “Learning is not attained by chance, it must be sought for with ardor and attended to with diligence.”

You can only become a good developer if you learn consistently for 2-4 hours daily. It is ok to take a day or two of rest sometimes, but try to code every day if you want to get a job ASAP.

I made these four steps to follow in the learning phase that will help you become a better self-taught programmer:

1. Start with the basics
   
   Learn the basics of chosen programming language, the programming paradigm used for your desired technology, design patterns, and good programming practices.
   
   The worst thing you can do is start working on projects without understanding these rules and principles by following a tutorial on the internet. In this case, you will end up with spaghetti code, unable to understand your code.
   
   In my case, for android development, I started with Java and OOP (Object Oriented Programming). I didn’t begin with android development right away. Instead, I focused on the basics of programming for the first two months.
   
   
2. Acquire tech-specific knowledge
   
   When you understand the basics of a programming language and a programming paradigm, you can start learning more about the technology/niche in which you are interested.
   
   In this phase, I started with the basics of android development.
   
   
3. Don’t overdo it.
   
   Don’t start learning for eight hours every day because you will experience burnout. Programmer burnout is emotional and mental tiredness in doing computer programming caused due to excess programming/learning.
   
   Do not study for more than a maximum of 4 hours a day. Even that is a lot for some people. Consistency is the key. Learn as much as you can and stay healthy, psychologically and physically.
   
   
4. Find a mentor.
   
   Finding a good mentor can make learning much easier and more enjoyable. A good mentor will give you study guidelines so you don’t wander off while learning, allowing you to focus on the crucial things.

Preparing for job application

Before applying for a job you will need to be well prepared. You need to be different and noticeable to have the best chances of getting hired. These four things will be crucial:

1. Build real-world projects that people can use.
   
   Many tutorials teach you how to make many useless projects instead of building a couple of useful ones. For example, if you are into web development, try to make a fully functional online store that people can potentially use.
   
   Tutorials from which I learned taught about making a tic-tac-toe game, weather app, quiz game, etc. These projects are ok for learning the basics but before applying for a job position, build an app that people can download on Google Play Store and use in real life. It’s better to have one app that implements a couple of libraries and has a clean architecture that is useful than to have many simple apps that are useless.
   
   I applied for a job with one app on the Google Play Store with MVVM architecture, SQLite database with Room persistence library, Firebase for user log-in authentication, and four basic operations of persistent storage – create, read, update, and delete (CRUD). Apart from that, I had two basic apps that showed I could use Google Maps API and a weather app that showed I could work with JSON.
   
   
2. Make a CV that stands out.
   
   If your CV sucks, even though you are an “awesome” programmer, you will not get almost any interviews.
   
   Find tips on how to write a good CV that stands out. I suggest you also check out CV-making platforms like resume.io.
   
   
3. Make a personal portfolio website.
   
   I recommend checking out GitHub Pages. Here you can host a website for free.
   
   
4. Optimize LinkedIn profile
   
   And last but not least, make an optimized LinkedIn profile. You can find tips on how to make a good LinkedIn profile online.
   
   This is important since you will also apply for jobs on this platform. Also, recruiters can find you here and contact you even before you apply for a job, and a professional-looking profile will show that you are serious and active.

Applying for a job

When you are finally ready, you can start applying. You will probably still think you are not good enough, but if you managed to finish all previous tasks, you are ready. You are applying for a junior developer position without work experience, no one is expecting you to know everything. You must have a solid foundational understanding of programming in general and your specific technology. The learning process will begin when you start working on large-scale projects in a team at your first job.

You will probably feel anxiety when you get your first interview. But trust me, there is nothing to be afraid of. Try to learn from your interviews, and don’t give up until you get a job, even if it takes a lot of failed interviews.

Here are some tips to help you get a job:

1. Apply to all job postings (for your tech niche).

If there are 50, 100, 200, or even more job postings, apply to all of them, and remember to make a list of companies you applied to. Many companies will not respond to your application at all, and some will respond to you after several days, weeks, or months.

I applied to around 50 different job postings and got around 15 interviews.


2. Again, apply to all job postings.

Even if you are a junior developer, you should apply to job postings for mid and senior-level developers.

Some companies responded to my application after some time saying that they have an open junior developer position.


3. Be communicative and confident, and express your ideas during interviews.

Feeling confident – or pretending that you feel confident – is necessary to reach for opportunities. It’s a cliché, but opportunities are rarely offered; they’re seized. – Sheryl Sandberg, Chief Operating Officer of Facebook

You may think that interviewers will mainly value your coding skills. But they are looking for a person that is ready to grow and learn, can work in a team, and can contribute with their ideas.

4. Failure is not an option

Don’t give up if the first couple of interviews doesn’t go well. Use failure to identify where you could use some improvement. Do whatever it takes to get your first job. Improvise. Adapt. Overcome.

Reaching your goal or just starting an adventure.

You might think you’ve reached your goal when you get your first job. But the truth is that getting a job is just your first step.

Try to enjoy this neverending growing process and use your newly acquired skills to improve your life and make the world a better place for everyone.

“Also, don’t forget that some of the most successful people in the world are self-taught programmers. Steve Wozniak, the founder of Apple, is a self-taught programmer. So is Margaret Hamilton, who received the Presidential Medal of Freedom for her work on NASA’s Apollo Moon missions; David Karp, founder of Tumblr; Jack Dorsey, founder of Twitter; and Kevin Systrom, founder of Instagram.”
― Cory Althoff, The Self-Taught Programmer: The Definitive Guide to Programming Professionally

Welcome to the widget class

Creating flutter UI can be demanding. But you’re in luck, you have your greatest helper, the Widget class, here to help you!

In the world of flutter UI, everything is a widget. Widget is the primary building block of the Flutter UI. Widget is an immutable description of part of a user interface, which means all their fields must be final. By themselves, widgets have no mutable state.

What are stateless and stateful widgets?

A stateful widget is a widget that has a mutable state associated with it. Associating a mutable state to a widget like this gives the app interactivity and responsiveness. Without stateful widgets, we wouldn’t be able to do something like this in the images below:

Here, we can change the border of the card and replace the text in it with a nice checkmark, pointing out that the card is selected.

On the one hand, stateless widgets don’t have a state associated with them. This means that when a stateless widget is built, it cannot be changed unless we create a whole new instance of that widget. On the other hand, stateful widgets can be rebuilt any number of times, just call setState, and in the body of setState put the code that affects the UI.

Stateless widgets when created look like this:

<code class="language-dart">
 class StatelessExample extends StatelessWidget {
                @override
                Widget build(BuildContext context) {
                               return Text("This is a stateless widget");
                }
 } 
</code>

… While stateful widgets look like this:

<code class="language-dart">
 class StatefulExample extends StatefulWidget {
                @override
                State createState() => _StatefulExampleState();
 }
  
 class _StatefulExampleState extends State&#60;StatefulExample&#62; {
                @override
                Widget build(BuildContext context) {
                               return Text("This is a stateful widget");
                }
 }
</code>

For example, if we wanted to implement the Selected functionality shown in the images above, we would need to have a variable in our stateful widget, _isSelected.

All that is left is for us to call setState in the onPressed method of the widget surrounding the card body (in this example, the surrounding widget is InkWell, but it can be done with GestureDetector):

<code class="language-dart">
 onPressed: () {
                setState((){
                               _isSelected= true;           
                });
 }
</code>

The other option is to do something in the lines of this:

<code class="language-dart">
 onPressed: () {
                _isSelected = true;          
                setState((){
                });
 }
</code>

I have to mention that the first way is better because it tells you exactly what’s going on and what you are changing when calling the rebuild method, setState. With that in mind, it should be used only to wrap the actual changes to the state, not any computation that might be associated with the change.

Flutter UI hierarchy and setState

Flutter’s UI hierarchy is based on a widget tree. Every time we create a new instance of a widget, it is added to the widget tree as a child of the widget from which it was instantiated. Because of this, calling setState can sometimes be really costly. When we call setState, it does call the build method of the widget, but it rebuilds the whole subtree beneath that widget. In other words, it calls the build method of all of its children, too. If the subtree beneath it is deep, that setState can end up being costly. That is why it’s good practice to always keep the whole widget tree relatively shallow, so you don’t have to worry about costly rebuilds.

To sum things up…

… If the main idea you got out of this article is that stateless widgets are used to create UI that does not depend on the input of the user and that stateful widgets are used for creating dynamic UI, you can give yourself a pat on the back! You did well and made the first step to understanding how flutter works!