I tried web application development and thought about how to prevent beginners from getting sick.

§ Qiita's first post, so nice to meet you

Nice to meet you, everyone living in Qiita Land.

I didn't feel like posting much because I felt that Qiita had a lot of great people, but I wanted to do some output, so I decided to post it.

Thank you for your kindness.

A little self-introduction (It has nothing to do with the title, so you can skip it)

At the moment (2020/04), I belong to the Department of Computer Science, a third-year student at a certain university. Before I entered university, I had a stance of "programming, what is it delicious?", But once I finished learning Java object-oriented programming in class, I now think "Hey, programming is a pain." At school, I often talk about algorithms, information theory, OS, computer architecture, digital circuits, etc. rather than programming, so I don't really write much code. Writing code is almost my hobby. That's why I decided to do web development on my own and train myself to write code.

§ About In this article, I will explain what steps a beginner who is new to web application development should take to escape the violent copy and paste and code while understanding for himself. It is a thing that I thought about and wrote.

§ Environment

I'm learning using Python-based web frameworks (Django, Flask). Detailed development environment below.

§ My learning source and its contents

I will write in the order I learned.

-** What you learned in the computer science class and seems to be related to Web development ** --Object-oriented programming in Java (especially understanding field, constructor, instance, class inheritance)

-** Everyone's Python 4th Edition 8th Edition ** (published by SB Creative) --Basic calculation --Difference in data type --Class inheritance

-** HTML & CSS for people starting the Web, JavaScript Kihon no Kihon ** (Kindle, by Makoto Taniguchi) --HTML structure --JavaScript basics (Vanilla JS, jQuery, Vue.js basics)

-** Progate HTML, CSS course (free only) **

-** Move and learn! Introduction to Python Django development ** (published by Shoeisha) --How the web application works --Python, Django environment construction --Backend mechanism (routing, view, interaction with DB) --Front-end mechanism (HTML, CSS, JS) --Deploy to production environment

-** Technology that supports the Web --HTTP, URI, HTML, and REST ** (Kindle, by Yohei Yamamoto) --Web design concept --URI (URL) implementation policy --Hypertext Transfer Protocol (HTTP) design concept --Others (I haven't read it yet)

I've lined up a lot of learning sources, but it took a little less than two years ** to complete all of this ... Don't.

** The biggest mistake was to solidify the basic technology without setting a purpose.

§ Stumbles and how to deal with them

If you want to develop a web app! I have a strong feeling that I don't know what to do! If there are people who say that, I think it is better to be enthusiastic to finish this amount in ** a year, preferably half a year **. I want you to lean forward and learn!

Below are the stumbling blocks that I thought through this learning and how to deal with them.

● Stumble 1 ● There are many learning techniques to cover everything.

I think most people will have a headache with this. HTML, CSS, JS, Python, Django, HTTP, ... I have thought that the mechanism of the Web is ** a variety of technologies covering various fields **, so-called ** comprehensive art **. By the way, the listed technologies are not enough. At least security, databases, etc. are not enough.
The solution to this is all-out, ** divide the difficulties. ** (I wonder if it can be transmitted, it is a nostalgic Leroy monk)
To be honest, it is impossible for beginners to do all the development by themselves (called a full stack engineer).

It takes time to learn all the techniques, and I am struck by the overwhelming amount of knowledge in the first place. I'm pretty broken.

If ** the goal is to complete the product **, I don't think it's a good idea to keep spending time on how to achieve that goal. I think it is best to work in a team that combines people with various specialties. If you feel that you don't have the skills you can handle, you can do it in any field, just finish one introductory book and try another product by changing the numbers in that introductory book. But let's make it. It is a step forward step by step.

On the other hand, if you are ** aiming to learn the technology around Web applications **, let's touch on various technical aspects and make a lot of errors and suffer (suddenly demon). That seems to be your shortest skill acquisition technique. Let's work hard.

● Stumble 2 ● I am at a loss because I am a beginner and do not know what to start with

In my personal opinion, it feels better to go to the ** front end side ** first. It feels great when HTML and CSS are decided. In addition, I think that even in hackathons, if you put on the front end, you will feel like you have done a lot of work.

The back end is familiar with the language and also learns how to use the framework, so there are times when you learn twice, so I think it will take some time from the start of studying until you can actually make a product (of course). I'm not saying that the front end can be done without studying, and personally it's becoming the field I want to study the most).

As for what I should study further, I recommend ** Progate, which does not require environment construction, ** is completed on the browser, and ** changes are reflected immediately **. think.

Books are good, but if the publication date is a little earlier, the CSS writing method may be old, or the framework version may be up and not supported, so just check if the publication date is old. I think it's better to keep it.

● Stumble 3 ● I don't know how to choose a language

I honestly don't know this (because I haven't touched other languages and frameworks such as Ruby at this time), but one thing I can say is that ** choose a language you are familiar with ** * * I think it is good for mental health **.

I was just playing around with Python when I first started working with web apps, so I chose a Python framework. Basically, in development, you do not write the code yourself from scratch, but you make good use of the code (library) written by other people, so it is easier to get used to the unique notation of the language. is.

I am prepared to get a lot of errors during development. When dealing with that error, I think it's about three times as hard as a language you're used to finding out what's causing it if you're not familiar with it.

For those who haven't touched any language, I honestly don't recommend Python (especially Flask). Because the amount of information on the Web is overwhelmingly small. (The number of search hits on Qiita is ** Rails 33401, Flask 2346, Django 4588 (as of April 14, 2020) **, and I think that the weakness of the Python framework is overwhelming.) This difference in the amount of information affects the development speed, so if you have never touched it, we recommend in the order of Ruby on Rails> Python Django> Python Flask.

● Stumble 4 ● There are too many mounting methods and I don't know which one to choose.

I think there are people who are doing this while googled on the net. It's written like this on that page, but it often happens that it's written like this.

In such a case, the most useful thing is the ** official document ** or ** book called a masterpiece **.

The official documentation is in the words of the developers and the like, and is often ** explained in the most concise and pointed out, stark word sense **. By the way, the official tutorial of Django, a Python-based web application framework, is God. Rather than google around, think that you have been deceived by the official tutorial and try running once. The steps to explain are all engraved where it is easy for beginners to trip.

In addition, there are some books that Qiita recommends that "this book should be read". Of the articles that basically say that, ** books that are acclaimed in multiple articles are basically good books **. I think it's better to look for a book that way than to rely on Amazon reviews.

If you're worried about how to implement it, stop ** developing ** and ** trying to go to google ** and then go to ** official documentation ** or ** books called masterpieces **. You should take the time to read it.

** The chaos in your head is organized in a pleasant way, paving the way for implementation. ** (It's a great religion, but it's true)

** Amazingly studying. This is serious. ** **

My recommendation is ** Web-supporting technologies --HTTP, URI, HTML, and REST **, which I mentioned above. Did you go through the backend and wonder why you just use GET and POST on the Web? The answer is in this book. This is a must read.

● Stumbling 5 ● I started to make it and suddenly became dull in the middle of the process.

** Are you doing it alone? ** **

I think that services have users, so if possible, it feels better to develop in a place with people.

I think there is a community of engineers and designers all over the country. Even if you are not good at that kind of thing, you can go to the Mokumokukai or whatever. If you think it doesn't suit you, you can try it at the family restaurant with a reliable friend.

In the area where I live, a coworking facility where engineers and designers gather was born this spring, and I am a heavy user.

I think it's best to do it with someone, not alone. I don't think an engineer can be strong alone.

§ I thought of a web app development roadmap for beginners

If anything, it may be for people who ignore speed and want to solidify the ground and proceed. Roughly speaking, I feel like I'm learning in the order of front side → object-oriented programming → back end → official document or book.

  1. Learn HTML, CSS, Javascript with services that can be learned on the Web such as Progate (If you like the free trial, you should buy it)
  2. Write your own single-page HTML (Writing material is self-introduction page, artist introduction page, etc.)
  3. Choose one object-oriented programming language to complete the introductory book (If possible, it's better to choose a statically typed language (Java, Swift) for later, but it doesn't have to be.)
  4. Complete one book on web application development (Honestly, I don't understand the meaning of the code and it's difficult, but even if I don't understand something, I can copy it.)
  5. Start making the product you want to make while googled (Maybe the login function will be copied, but that's fine)
  6. Stop your hand at the moment you get stuck, look for the official document or book and read it whole
It feels like repeating steps 5 and 6 below.

The reason why statically typed languages that declare types are good is that you often don't understand why your code doesn't work unless you are strongly aware of the concept of types. Basically, most web-based languages (Ruby, Python) are dynamically typed languages (like), but I know that it is convenient to hide the concept of types. I think it's only humans. It seems that an adult with a gentle face was actually a scary person. This seems to be honestly pros and cons, but I think this is what I think.

Finally

It has become unexpectedly long. Did you put too much effort into it?

Actually, this is an article that is not very friendly to beginners.

If you don't understand a word, please do a Google search. I'm sorry.

However, I don't want you to worry in the same way when I stumble, so I hope everyone will do their best.

Thank you for reading and I will write something again.

Recommended Posts

I tried web application development and thought about how to prevent beginners from getting sick.
[Django-Extensions] Web development beginners tried to summarize Django-Extensions
A story about everything from data collection to AI development and Web application release in Python (3. AI development)
[ES Lab] I tried to develop a WEB application with Python and Flask ②
I thought about how to learn programming for free.
[Ipdb] Web development beginners tried to summarize debugging with Python
I thought about how to learn programming at low cost from an empty situation. (Mac edition)
I tried to let Pepper talk about event information and member information
I tried to extract players and skill names from sports articles
I tried to organize about MCMC.
I thought about how to learn programming at low cost from an empty situation. (Raspberry Pi edition)
[Deep Learning from scratch] I tried to implement sigmoid layer and Relu layer.
I tried to learn the angle from sin and cos with chainer
How to build an application from the cloud using the Django web framework
I want to make a web application using React and Python flask
I tried to make a Web API
About Cloud run + Firebase development [Web application development]
I tried benchmarking a web application framework
I tried Java8 + Spring Boot with GAE SE (and about its development environment)
[Python] I tried to solve 100 past questions that beginners and intermediates should solve [Part7 / 22]
[Python] I tried to solve 100 past questions that beginners and intermediates should solve [Part 4/22]
[Python] I tried to solve 100 past questions that beginners and intermediates should solve [Part3 / 22]
[Python] I tried to solve 100 past questions that beginners and intermediates should solve [Part 1/22]
How to run a Django application on a Docker container (development and production environment)
I tried to pass the G test and E qualification by training from 50
[Python] I tried to solve 100 past questions that beginners and intermediates should solve [Part 6/22]
It's been a year since I was self-taught and moved to the web application development department, so I look back
I tried web scraping to analyze the lyrics.
How to open a web browser from python
I tried web scraping using python and selenium
I implemented DCGAN and tried to generate apples
[Python] How to read data from CIFAR-10 and CIFAR-100
[Introduction to PID] I tried to control and play ♬
I tried to understand how to use Pandas and multicollinearity based on the Affairs dataset.
How to use Docker to containerize your application and how to use Docker Compose to run your application in a development environment
I made a tool to automatically generate a state transition diagram that can be used for both web development and application development