前端未来技术走向(TS, SSR, serverless, flutter,多端统一开发)

TS
TS为什么会出现?

1.js是一门弱类型而且还是动态类型的语言,语言本身的类型系统是非常薄弱的,当js去开发大型的前端项目,开发成本和维护成本都会非常的高

2.而ts是一门基于js基础之上的编程语言,它在javascript原有的基础之上多了一些扩展特性,主要就是一套更强大的类型系统和对ECMAScript新特性的支持.

TS的意义:

1.类型系统可以帮我们避免开发过程中有可能出现的类型异常
提高编码的效率,以及代码的可靠程度

2.ECMAScript几年迭代了很多非常有用的新功能,但是在很多陈旧的环境中都会出现兼容问题,Ts支持自动转换这些新特性,所以我们可以立即去使用它们

3.Ts最终可以选择编译到最低es3版本代码,所以兼容性强

4.Ts最终也是编译成js来运行,所以只要支持js的应用程序都可以用ts来开发

5.Ts应用逐渐广泛,例如:浏览器应用,nodejs应用,react native等,vue3.0也是全面用ts来重写

6.如果你开发的是一个小项目,可以用js更适合,如果是一个长周期的大型项目,那么ts是你的不二选择

服务端渲染(SSR)

目前主流的前端框架都是采用客户端渲染模式

所谓客户端渲染就是从服务器端发回来的html当中是没有任何内容的,所有的页面内容都是等到页面当中的js执行之后才会动态创建出来

这种模式的弊端就是

1.页面的’白屏’时间更长,用户体验不好

2.html中无内容,SEO(搜索引擎优化)不友好

如果用服务端渲染的话,这些问题就能很好的解决,因为

传统的客户端渲染模式就是在服务端接收到请求过后,需要找到对应的html静态文件,然后返回给客户端。而服务端渲染模式下面,当服务器接收到请求过后,会先执行一遍对应的js,让页面在服务端先渲染一遍,然后将渲染后的结果返回给客户端

serverless

Serverless是一种架构模式,翻译过来应该叫作无服务器架构

它带来了一种全新的开发体验,对于使用serverless架构进行开发的项目,开发者最明显的感受就是更关注应用的业务本身,不必再去过多关心服务器和运行平台的一系列问题

传统去开发一个web应用,除了需要考虑业务本身,还要考虑很多其他方面的东西,例如

服务器操作系统,虚拟机,硬件资源配置,运行版本等,会到初次配置非常麻烦,后期维护成本也高。后来服务渐渐切换到了云服务器上,就不用关心服务器底层维护的问题,而是更多考虑运行环境维护的问题,使得维护成本大大降低。而Serverless,无服务架构并不是真的无服务器,而是在开发人员眼中不用再去关注服务器,开发人员只需要按照要求去完成开发工作,其他所有事件都交给serverless去完成。

应用主要由两大块组成,分别是逻辑与存储。Serverless中就通过两种方式解决了着两块的需求:

1.函数即服务,Function as a Service ,FaaS。你去写一个实现业务逻辑的函数,你只需要把这个函数丢给容器,容器就会自动把这个函数映射到一个服务上面,然后你就通过http的方式去调用这个接口,

2.后端即服务,Backend as a Service,BaaS。它提供了一系列后端服务,比如数据或者文件的存储,消息推送,账户系统等。

优势在于

1.不需要再考虑什么物理机/虚拟机,结合工作流的情况下,代码提交自动部署,直接运行
2.没有服务器,维护成本自然大大降低,安全性稳定性更高
3.都是弹性伸缩云,硬件资源需要多少分配多少,不用担心性能问题
4.大多数Serverless服务商的计价方式都是按使用情况(如流量,CPU占用)来收费

flutter
Google2018年公开发布的一个移动App开发方案,通过flutter前端开发者就能够开发出真正意义上的原生APP

之前前端都是h5+webview+jsbridge或者RN去实现,但是都会存在一些问题,最明显的就是体验达不到原生的那种效果,性能上有所欠缺,而flutter是一个纯原生的开发方案,采用的是静态编译,也可以叫作提前编译,一个flutter项目编译后的结果就是原生应用.flutter目前也已经支持web平台了。要注意的是,flutter采用的编程语言是Google推出的Dart,而非js或者ts

多端统一开发

之前开发人员要为不同的平台单独维护一个项目,对开发者而言需要关注的内容就会更多,学习成本也就更高,目前前端行业已经出现了一些很成熟的多端统一开发方案,如Taro,uniapp。例如uniapp,开发者只需要编写一套代码就可以兼容数十个平台,

热门文章

暂无图片
编程学习 ·

ssm学习笔记——spring——AOP配置

spring中基于XMl的AOP配置1、把通知的bean也交给spring来管理2、使用aop:config标签表明开始AOP配置3、使用aop:aspect标签表明配置切面id属性:给切面提供唯一标识ref属性:是指定通知类的Id4、在aop:aspect标签的内部使用对应标签来配置通知的类型示例:让printLog方法在切…
暂无图片
编程学习 ·

一篇文章带你搞懂 SpringBoot 的配置文件

文章目录一、SpringBoot 配置文件类型1. SpringBoot配置文件类型和作用2. application.yml配置文件3. SpringBoot配置信息的查询二、配置文件与配置类的属性映射方式1. 使用注解@Value映射2. 使用注解@ConfigurationProperties映射 一、SpringBoot 配置文件类型 1. SpringBoot配…
暂无图片
编程学习 ·

什么是嵌入式培养?要不要选嵌入式培养?

前言 马上要高考了,高考完后势必要面临选专业,本人作为大二的计算机专业老油条,要为想选计算机专业的小萌新们科普科普,什么是嵌入式培养。嵌入式培养的概述 这里的嵌入式,说白了,就是要把社会上的东西,嵌入到学校的教学里 这个概念本来是没有的,但是上级领导认为,计算…
暂无图片
编程学习 ·

分布式数据存储系统之三要素

什么是分布式数据存储系统? 分布式存储系统的核心逻辑,就是将用户需要存储的数据根据某种规则存储到不同的机器上,当用户想要获取指定数据时,再按照规则到存储数据的机器里获取。 如下图所示,当用户(即应用程序)想要访问数据 D,分布式操作引擎通过一些映射方式,比如 H…
暂无图片
编程学习 ·

QT的::和:记录

******1.:一般指继承. Class 派生类 : 基类 (1)表示结构体内 位域的定义(即该变量占几个bit空间) (2)构造函du数后面的冒号起分割作用,是类给成员变量赋值的方法,初始化列表,更适用于成员变量的常量const型。 (3)public:和private:后面的冒号,表示后面定义的所有成员都是…
暂无图片
编程学习 ·

unordered_map/unorderd_set使用与哈希介绍

在C++98中,STL提供了底层为红黑树结构的一系列关联式容器,在查询时效率可达到 O(logN),即最差情况下 需要比较红黑树的高度次,当树中的节点非常多时,查询效率也不理想。最好的查询是,进行很少的比较次 数就能够将元素找到,因此在C++11中,STL又提供了4个unordered系列的…
暂无图片
编程学习 ·

Python中%r和%s的相同点和不同点

1、在处理布尔型或者数字型时,二者是没有区别的 (1)数字型 I am %r years old%22#%r ‘I am 22 years old’ I am %s years old%22#%s‘I am 22 years old’ This building is %r m tall%22.35#%r‘This building is 22.35 m tall’ This building is %s m tall%22.35#%s‘Thi…
暂无图片
编程学习 ·

Pandas 删除指定行

定位要删除的行 需求:删除指定列中NaN所在行。如下图,’open‘ 列中有一行为NaN,定位到它,然后删除。定位:df[np.isnan(df[open])].index # 这样即可定位到所在行的index,然后对该index进行drop操作即可删除行 df.drop(df[np.isnan(df[open])].index, inplace=True)# 直接…
暂无图片
编程学习 ·

jvm-回收对象(二)

总所周知,Java将程序员从内存管理中解放出来,使得我们在编写代码的时候不用手动的分配和释放内存,内存管理的任务由JVM承担起来。本文就将讲解JVM在回收对象之前,如何判断一个对象是否应该被回收。 在此之前,我们先来复习一个和Java对象回收有关的知识,那便是finalize方法…
暂无图片
编程学习 ·

vue项目实现路由按需加载(路由懒加载)的3种方式

vue异步组件es提案的import()webpack的require,ensure()vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件/* vue异步组件技术 */ {path: /home,name: home,component: resolve => re…
暂无图片
编程学习 ·

Node.Js+React.Js+Git的基本开发环境配置

1、基本开发环境的配置 主要包括node.Js的基本安装、React的基本安装、GIT的安装以及git可视化工具sourceTree的基本安装。 (1)node.Js的安装 官网搜索node.Js,下载安装包,进行傻瓜式安装(点击下一步就可以)。(2)React的基本安装 首先创建一个项目文件夹, cd 到需要创…
暂无图片
编程学习 ·

JavaIo流看这一篇就足够了

1什么是文件? 文件可认为是相关记录或存放在一起相关数据的集合。 我们用什么去操作文件呢? 在Java当中专门有一个包Java.io.*;是内置的包,包含对文件的读和写的操作。 2File类 在Java当中使用File类来操作文件和目录。 File类的四个构造方法 File(File parent, String chil…
暂无图片
编程学习 ·

matlab的subplot中间添加ylable

根据图形的坐标轴的大小确定中间位置或者是想要的位置。如下图所示,横坐标师10^6为单位的坐标轴,左边一点的位置大概为-300000,纵坐标最下面一幅图的总高度为1,倒数第二幅图像总高度为0.4,加上下面的空白处,中间位置大概为3.5左右,所以代码为ylabel(Amplitude,position,…
暂无图片
编程学习 ·

Java ssm框架搭建实现登录

Java ssm框架搭建实现登录 准备工作 1、创建数据库 2、创建数据表 3、导入包4、创建相应的包和文件#UserDao和UserService为接口文件 编写各个文件 User public class User {private int id;private String name;private String password;public int getId() {return id;}publi…
暂无图片
编程学习 ·

Python科学计算系列12—积分变换

1.拉普拉斯变换及逆变换拉普拉斯变换公式拉普拉斯逆变换公式例子:代码如下:from sympy import * from sympy.integrals import laplace_transformt, s, a = symbols(t s a) # 拉普拉斯变换 F1 = laplace_transform(sin(a * t), t, s) F2 = laplace_transform(exp(a * t), t, …
暂无图片
编程学习 ·

MySQL - 基础语法

MySQL - 基础语法 SQL Structured Query Language:结构化查询语言 定义了了操作所有关系型数据库的规则 SQL 通用语法SQL 语句可以单行或多行书写,以分号结尾 可使用空格和缩进来增强语句的可读性 MySQL 数据库的SQL语句不区分大小写,关键字建议大写 注释:单行注释:-- 注释…
暂无图片
编程学习 ·

JAVA笔记[2]20200701

JAVA笔记【2】对象与类继承 对象与类LocalDate类;static LocalTime now() 构造一个表示当前日期的对象 static LocalTime of(int year,int month,int day) 构造一个表示给定日期的对象 int getYear() int getMonthValue() int getDayOfMonth() 得到当前日期的年、月和日 DayOf…
暂无图片
编程学习 ·

STL常用函数底层原理

sort 在数据量大时采用快排,递归将数据分段,快速排序对“几近排序”的数据效率会下降;当分段后数据长度小于16时,为避免递归带来过大的额外负荷,采用插入排序,插入排序对“几近排序”的数据表现更好;当递归层次过深,采用堆排序,因为快排时间最差是O(N^2),堆排时间最差…
暂无图片
编程学习 ·

搭建ssm环境,各种xml配置

搭建ssm环境,各种xml配置 学完了ssm之后强烈建议大家去学习springboot,我当初也是学完ssm后看了几篇博客就开始使用springboot写项目。那是真的爽,根本不需要什么配置,开箱即用,想到当初搭建ssm环境时各种崩溃吐血,现在把一个简单的环境搭建分享出来。 实体类Account dao…