Why do I recommend Python as a second language on the front end?

preface

“How do you get out of the trap of constantly cutting images?”

This is not an angst-mongering article, but a Python promotion full of sincere advice.

When it comes to starting programming languages, most people recommend Python and JavaScript.

In fact, both languages are powerful in every way.

The ES6 language we know today borrows much of its syntax from Python.

There is a saying that “everything that can be implemented with JS will be implemented with JS.”

So here it is: “Anything that looks like Python will end up like Python.”

1. `Python`and`ES6`Grammar differences

1. Basic types

It’s worth noting that although both are dynamically typed, Python does not automatically convert the type when it connects.

// JavaScript
let coerced = 1;
let concatenated = coerced + 'string';
Copy the code

// Python
not_coerced = 1
concatenated = not_coerced + 'string'
Copy the code

TypeError: Cannot concatenate ‘STR’ and ‘int’ objects

This works only if num is converted to a string in advance

# Python
not_coerced = 1
concatenated = str(not_coerced) + 'string'
Copy the code

2. `Functions` or`methods`?

In JavaScript and Python, functions and conditions are structured very similarly. Such as:

// JavaScript
function drSeuss(catInTheHat, thing1, thing2) {
  if (catInTheHat == true &&
    thing1 == true &&
    thing2 == true) {
    console.log('is cray');
  } else if(catInTheHat ! =true) {
    console.log('boring');
  } else {
    console.log('so boring'); }}Copy the code

# Python
def dr_seuss(cat_in_the_hat, thing1, thing2):
  if cat_in_the_hat == True and
    thing2 == True and
    thing2 == True:
    print 'is cray'
  elifcat_in_the_hat ! = True:print 'boring'
  else:
    print 'so boring'
Copy the code

But in JavaScript, the colloquial definition of methods refers to methods built into the language specification, such as function.prototype.apply ().

There are two explanations in MDN:

In most respects Functions and methods are the same, but there are two major differences:

methodsCan be implicitly passed to call themethodsObject on.
methodsThe ability to manipulate data contained in a class.

Of course, in JavaScript, “classes” are just syntactic sugar, which we’ll compare later.

3. Template string

JavaScript used to be ahead of Python in template strings.

// JavaScript
let exclamation = 'Whoa! ';
let sentence = `They are really similar to Python.`;
 
console.log(`Template Literals: ${exclamation} ${sentence}`);
Copy the code

# python
print 'Print: {} {}'.format('Whoa.'.'Quite! ')
# Print: yup.quite!
Copy the code

{} acts as a placeholder. This syntax was criticized so much that f-strings, a string formatting syntax, was added in Python3.6.

Direct contrast:

name = "Tom"
age = 3
print(f"His name is {name}, {age} years old")
His name is Tom and he is 3 years old
Copy the code

4. Default values

JavaScript “borrows” Python perfectly once again:

// JavaScript
function nom(food="ice cream") {
  console.log(`Time to eat ${food}`); } nom(); // Time to eat ice creamCopy the code

# Python
def nom(food="ice cream") :print 'Time to eat {}'.format(food)
 
nom() # Time to eat ice cream
Copy the code

5. Other parameters and`* args`

Rest argument syntax, which allows us to represent an indefinite number of arguments as arrays and pass them into functions.

inPythonThey are called* args
inJavaScriptIn the. xxxRepresents the rest of the arguments.

// JavaScript
functionjoke(question, ... phrases) { console.log(question);for (leti = 0; i > phrases.length; i++) { console.log(phrases[i]); }}let es6Joke = "Why does JS single out one parameter?"
joke(es6Joke, "Because it doesn't".'really like'.'all the REST of them! ');
 
// Why does JS single out one parameter?
// Because it doesn't
// really like
// all the REST of them!
Copy the code

# Python
def pirate_joke(question, *args):
  print question
  for arg in args:
    print arg
 
python_joke = "What's a Pyrate's favorite parameter?"
 
pirate_joke(python_joke, "*args!"."*arrgs!"."*arrrgs!")
 
# What's a Pyrate's favorite parameter?
# *args!
# *arrgs!
# *arrrgs!
Copy the code

6. `Classes`Class:

As we all know, ES6 classes are actually syntactic sugar. Python has built-in classes that make object-oriented programming fast and easy.

JavaScript prototype chain inheritance is a must for every front-end.

// JavaScript
class Mammal {
  constructor() {
    this.neocortex = true;
  }
}
 
class Cat extends Mammal {
  constructor(name, years) {
    super();
    this.name = name;
    this.years = years;
  }
 
  eat(food) {
    console.log('nom '+ food); }}Copy the code

# Python
class Mammal(object):
  neo_cortex = True
 
class Cat(Mammal):
  def __init__(self, name, years):
    self.name = name
    self.years = years
 
  def eat(food):
    print 'nom %s' % (food)
 
fry_cat = Cat('Fry', 7)
fry_cat.eat('steak')
Copy the code

To be fair, Python is written more elegantly…

7. `Modules and import`: the module’s

ES6’s modular language, borrowed from Python, is superior to it. There are some differences between the two:

JavaScriptImports are static;PythonIt’s dynamic.
JavaScriptModules must be exported explicitly. inPython, all modules can be imported.
JavaScriptHas the concept of a default export.PythonNo.

# python
import mymodule
mymodule.myfunc()
Copy the code

// javascript
import * as myalias from "./mymodule";
myalias.myfunc();
Copy the code

1. Import sub-modules

In javascript, we want to import modules and just deconstruct the assignment

// javascript
import { myvar, myfunc } from "./mymodule";
console.log(myvar);
myfunc();
Copy the code

In Python, the semantics are reversed:

# python
from mymodule import myvar, myfunc
print myvar
myfunc()
Copy the code

2. Export empty functions

To export an empty function, Python uses the “pass” keyword as a placeholder to avoid errors. mymodule.py:

# python
def myfunc(): pass

// javascript
export function myfunc() {}
Copy the code

See Modules and Import in ES6 for Python Developers for more details

2. How to learn the front-end gracefully`Python`?

Much of the front-end enthusiasm for Python begins with curiosity and ends with stagnation.

There is a technological gap between practical work and development, and no one gives guidance to carry belt, and I do not know what the current level can do. In this cycle of confusion, programming skills stagnate, and crawlers are one of the best ways to advance.

Web crawler is a common scene of Python. Internationally, Google used Python language extensively as the basis of web crawler in the early stage, which promoted the application development of the whole Python language.

For my own personal development, I highly recommend starting with crawlers for several reasons:

The crawler is aimed atThe web pageAn application of technology, the front end can painlessly link up a lot of knowledge.
The first step of crawler is to obtain page source code, and then do information extraction. One fordomeThe node’sclass/idChoice, the front end does not need to learn again.

Virtual login and crawlerSeleniumCan improve the front-end’s understanding of automated testing.
The ultimate form of a crawler is a search engineSEOIt’s something that every front end needs to be concerned about.
In the process of learning about search engine crawlers, the front end can figure out server-side renderingSSRAnd single page appsCSRDifferent effects of.

Crawler can be divided into two ways: page – oriented and interface – oriented

Page – oriented, natural front – end familiar.
Interface oriented, you need to know how to use packet capture software (Fiddler/Charles).
In this process, and can learn a skill – grab a bag. You don’t have to look anymoreNetworkSilly refreshed.

Beginning with the reptile, but not ending with the reptile:

Crawler -> data cleaning -> database operations -> data cleaning -> data mining -> data analysis…

There’s a lot you can learn along the way:

Scrapy crawler framework, Redis Distributed Transactions, Data processing Pandas, NLP for Natural language analysis, Complete data visualization, and more….

As for the language discussion, I quite agree with teacher Li Bing’s words:

3. Pan Shiyi is studying`Python`

So I created a Python public account suitable for the front end.

Don’t hesitate to play with the counselor. ~

4. Postscript & citation

Modules and import in ES6 for Python developers

How Python can help you learn ES6)

❤️ Read three things

If you find this article inspiring, I’d like to invite you to do me three small favors:

Like, so that more people can see this content (collection does not like, is a rogue -_-)
Follow the public account “front end persuader” to share original knowledge from time to time.
Look at other articles as well

Chrome Devtools Advanced Debugging Guide (New)
JavaScript Tools (new)
React Hooks 120 lines of code implement a fully interactive drag-and-upload component
React Hooks 160 lines of code for dynamic and cool visualizations – leaderboards

GitHub

Front-end persuasion guide: github.com/roger-hiro/…

Why do I recommend Python as a second language on the front end?

preface

1. PythonandES6Grammar differences

1. Basic types

2. Functions ormethods?

3. Template string

4. Default values

5. Other parameters and* args

6. ClassesClass:

7. Modules and import: the module’s

1. Import sub-modules

2. Export empty functions

2. How to learn the front-end gracefullyPython?

3. Pan Shiyi is studyingPython

4. Postscript & citation

❤️ Read three things

Related Posts

Vue-lottie controls the number of playing, pausing and jumping frames of an animation

$nextTick mechanism in Vue

CSS – Summary of common effects of the project