Translated from 日本語 • View original I became an employee on February 1st. This is my first blog. This is my first job because I am an employee from today.
By the way, I am a designer. But I'm becoming a front-end engineer. But I'm a designer.
Yes, let's stop making meaningless preambles and get to the point. Today, I'm going to give you an overview of front-end development tools. Don't say, "I'm not a front-end engineer after all!"
HTML/CSS/JavaScript.
When it comes to front-end development people, they basically recognize HTML/CSS/JavaScript. As for other tools, as long as you have a browser and an editor, you can develop them immediately, although they are extreme. It's easy, isn't it? It's probably not wrong. Like this.
I think the perception of those who are not involved in front-end development is roughly like this. It's probably not wrong. (2nd time)
I tried to pursue best practices.
Now, what happens when we look for best practices for development? I thought I'd try to make a list as much as I could think of.
Like this
Huh?
**It's a lie・・・・・・ it's a dream・・・・・・ this ・・・・・・ a dream・・・・・・・・・ **
But it's not a dream ・・・・・・ ・・・・・・! It's ・・・・・・ reality! This is the reality...!
The demand for front-end engineers continues to increase. Of course, the salary will definitely remain unchanged. The world is heartless.
Needless to say, it is up to the individual to decide whether to continue to follow the technology or not to know it.
Why is this happening?
/)( ◕ ‿‿ ◕ )(\ I don't understand why.
Factor 1 - Web Richness & Mobile
Ajax
UI construction technology using asynchronous communication. Bring data without page transitions. I can't help but be grateful when I think that Google Maps can be used thanks to this. Nowadays, it is a normal feeling that you can do various things without page transitions, but it is a technology that benefits from it as a matter of course.
There are many other things that have increased.
- Cross-site scripting
- Cross-site request forgery
- SQL injection
It feels like a kitchen disease. It tickles my heart! It's all a security issue. Statistically, it seems that there are about 1,000 cases per year in total of the three. There were almost no of them until then. I wanted to quote from a graph of statistical data or somewhere, but I couldn't find it because it was a mess ( ◠‿◠ ) Hmm If you want to know more, please go to the link below. It is very well put together.
Understanding Ajax vulnerabilities - IBM developerWorks
The Emergence of HTML5/CSS3
HTML5 sets new guidelines compared to previous versions. It is about to become a platform for web applications. As a recent example, it was finally announced yesterday that YouTube videos will be switching from Flash-based to HTML5-based. With the advent of CSS3, there are more things you can do with the frontend.
The more you can do, the more you will be asked for. If there are more things to do, there will be a lot of dissatisfaction as before. Then there will naturally be a tool to solve it.
Mobile Boom
Needless to say. It's common to try to be responsive, say something mobile-first, or just words get ahead of you when you don't understand it well (it doesn't explain anything. jQuery Mobile? I don't know.
- More things you can do
- **Security measures are also required. **
Factor 2 - CSS and JavaScript Specifications
CSS Looseness
You can write CSS! Even if there are many people, you can design a solid CSS. I'm confident! I don't think there are many people who say that.
CSS has a low learning cost, but anyone can write it, so the design is often messy and difficult to maintain. There was a time when I thought it was a personal problem, but it doesn't seem to be the case, so I'll post a reference link.
So what are the measures to avoid worrying about CSS maintenance? That's the story.
Countermeasures 1. Let's design it properly
- OOCSS - Let's write object-oriented CSS. Separation of structure and appearance. Container and content separation.
- SMACSS - The one that is classified as a module. Base, Layout, Module, State, Theme, etc.
- BEM - Divided into Block, Element, and Modifier, it is a tough and tough one.
These are not tools. In terms of design thinking, let's do something about other naming conventions and operation. I hope I can write a blog someday, but for now, if you want to know more, please go around. (Miscellaneous)
Countermeasures2. Using CSS preprocessors
There are also large-scale developments that are difficult to manage just by operation. In addition, you will be able to use functions that are not in CSS but want to use. Variables, operations, nests, mixins, etc. I feel like I can write easily (important)
In the end, it is important to note that since it compiles and generates CSS, it is not completely free from design.
- Sass - Made by Ruby. Thanks to Compass (described later), he feels like he is quite ahead.
- LESS - Node.js made. The one that was used in Bootstrap and secured a position in a good way.
- Stylus - made in Node.js. A good and childish guy that is common in latecomers.
Compass is a framework for Sass. I don't think I'll know what's going on ( ◠‿◠ )
JavaScript Execution Environment
Server-side JavaScript
There was a time when I thought that JavaScript would run on the browser, and there was no problem. Now, thanks to the rise of Node.js, server-side JavaScript cannot be ignored. By the way, the one that is paying the most attention right now is io.js. I know Node.js server-side JavaScript, but what is io.js? To explain it briefly, the io.js is a fork (generating a copy of one point in time and deriving it as another) from the Node.js. I will leave the explanation of why it was derived in this way to the blog that writes in detail, but what I would like to pay attention to is the difference in the number of commits on GitHub. There is a clear difference in the excitement after the fork in the middle of 2014. I'm worried about the future of Node.js.
Client-side JavaScript
JavaScript runs on the browser. What you want to say is implemented for each browser, so there is a difference. In short, it's troublesome. It was born as a prototype.js to somehow, libraries and other things were created, and before I knew it, jQuery was all the rage. It's roughly like this.
jQuery is very easy to use, but as mentioned above, there are many large-scale developments in recent years where there are many things that can be done with front-end expressions, and the weaknesses of jQuery have been exposed.
Maintenance is difficult. It's a medapani state called a large amount of DOM manipulation. Many frameworks and libraries have emerged to solve this problem. There is no end to the details this time, so it's just a list.
- Backbone.js - It brings the concept of MVC to JS and is characterized by a simple structure.
- Angular.js - MVW framework with unique specifications such as bidirectional data binding. It is characterized by a full-stack feel.
- Knockout.js - MVVW framework. Speaking of popular frameworks, you can say Angular, Backbone, Knockout, etc., right?
- Vue.js - It's a latecomer framework, so it's a good one.
- Ember.js - MVC framework. The character is cute.
- React.js - Adopts a wonderful concept such as virtual DOM. Recently, you also released a language for mobile development called ReactNative.
In short, there are many things that are organized in MVx. jQuery UI?
Factor 3 - Human
There are tools that were born as a chain reaction to respond to evolution.
Humans are willing to spare any effort to make it easier
Me (1989~)
In short, I want to be easy. If you can make something good to do roughly, you don't want to work.
For those who don't want to work because they think it's troublesome to write HTML
Emmet tool for those who want to write HTML more easily. In the past, it was called Zen-Coding. Easy. To start Emmet, just remember this for the time being.
If you use Jade Node.js's HTML template engine Express (Node.js), you can use it without any special configuration. I've learned notation, but I have to set up a compilation, so if you're not using it in a combination that goes well with it, Emmet is a good idea. About Jade. - Gists - GitHub
Haml / Slim Ruby template engine Rails If you are using these, choose from these. Rails Template Engine Comparison: erb vs slim vs haml
For those who don't want to work because they thought it was troublesome to press the update button (tap the shortcut)
- I don't want to press the Live Reload update button. When I tried to press Command+R, I pressed Command+T and a new tab opened, and I didn't want to delete it. I don't want to move my hands up to F5← A tool that reloads the file after saving it. LiveReload is too convenient
- Browser Sync is a typical example of trying to make it easier. I write a gruntfile or gulpfile, but the return is too big. So if someone writes it, it's crazy. Browser confirmation is instantaneous! Getting Started with Grunt and Gulp Getting Started with BrowserSync
For those who apply to both of the above, there is also a tool called Emmet LiveStyle.
For those who don't want to work because they thought it was troublesome to write JS
There is something called AltJS. I'll eventually compile it into JS.
CoffeeScript Easy. The decrease in the amount of code that actually needs to be written is not a big deal.
There are people in the world who want to be precise even though it is TypeScript, and this is the tool for such people.
Yeoman
Grunt
gulp
The one who later realized that I was missing the explanation.
These guys also want to be relaxed after all.
Factor 4. The one who was supposed to write tests when it became large-scale
I want to write a test. (Miscellaneous)
Unit Test Tools
Comprehensive Testing Tools
Selenium and Phantom.js (miscellaneous)
To Catch Up on Information
What should I do with so much information? What I do to avoid trouble
- Create a system that allows information of interest to enter. You can also summarize blogs that you may be interested in on RSS. Register on the study group summary site so that you can check each one if you are interested.
- Don't ask for everything: If you think you've become an uncle, think about what information you don't need.
- Find an influencer for yourself There are people who say that if this person says it, they will take it at face value to some extent. If you can't secure time for yourself, it's just a matter of incorporating the wisdom of your predecessors.
- Continuation does not stop.
So what should I choose? I would like to write about this question next time.