►
From YouTube: Lecture intro to frontend engineering 2021
Description
No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).
A
Welcome
to
this
lecture,
the
topic
for
today
is
front-end
engineering.
First,
let's
look
at
what
is
front-end
engineering.
Then
we
can
take
a
look
at
some
of
the
features
of
a
typical
front-end
engineering
role.
After
that,
let's
take
a
quick
look
at
some
key
tools
and
technologies
used
by
front-end
engineers.
A
Let's
start
by
taking
a
quick
look
at
what
is
front-end
engineering
and
why
it
exists.
The
internet
has
become
an
integral
part
of
the
lives
of
many
people
around
the
world.
Not
only
does
it
affect
how
we
work,
it
also
affects
how
we
communicate
stay
in
touch
stay
connected
to
the
rest
of
the
world.
A
A
Another
important
aspect
of
front-end
engineering
is
having
an
understanding
of
not
only
the
company's
goals
and
business
processes,
but
also
the
user
objectives
for
whatever
application
or
website
they're
using.
This
is
often
balanced
against
technical
debt
and
any
other
external
constraints
that
might
be
imposed
on
the
system
in
a
typical
medium
to
large
software
development
team.
It's
quite
likely
that
there'll
be
multiple
front-end
engineers
that
work
across
various
different
aspects
depending
on
the
size
of
the
company
or
the
team,
or
perhaps
the
stage
of
the
product.
A
A
A
Another
type
of
front-end
engineer
is
the
application
engineer.
Typically,
these
types
of
engineers
will
focus
on
connecting
user
interfaces
to
business
processes
or
goals,
for
example
a
user
interface
that
allows
you
to
access
your
online
banking
details,
view
your
statements
and
also
query
previous
transactions.
A
Front-End,
architects
tend
to
work
across
an
entire
front-end
development
team,
while
not
a
strictly
separate
role.
There's
often
a
need
in
any
medium
to
large
team
to
have
front-end
engineers
that
are
focused
on
tooling
and
infrastructure
to
help
other
engineers
efficiently
and
effectively
build
features
or
components.
A
A
The
ability
to
communicate,
effectively
and
efficiently,
as
well
as
being
able
to
collaborate
with
peers,
helps
ensure
these
goals
can
be
achieved
typically
in
a
sufficiently
large
cross-functional
team.
So
a
team
that
crosses
over
design,
front-end
and
back-end
development,
the
workflow
might
look
something
like
this
designers
will
develop
prototypes
for
a
new
user
process
or
flow
detailing
a
new
service
that
has
been
designed
based
on
the
needs
of
their
users.
A
A
Additionally,
there
are
better
tools
available
for
users
who
may
have
different
abilities,
particularly
say
users
with
poor
eyesight
or
those
that
might
struggle
with
more
common
input
devices.
Unfortunately,
accessibility
is
often
misrepresented.
It's
something
that
only
really
matters
for
users
with
different
physical
abilities,
but
the
principles
of
web
accessibility
actually
help
ensure
access
for
all
types
of
users,
such
as
users
with
a
temporary
disability,
for
example,
a
broken
arm
users
with
dyslexia
or
other
reading
disorders,
or
simply
users
who
may
not
speak
the
language
that
the
website
was
designed
in.
A
With
the
increase
in
the
use
of
multiple
devices,
often
with
different
screen
sizes,
browser
orientations
and
different
capabilities,
it
has
become
ever
more
challenging
to
design
and
develop
web
applications
and
web
pages
that
are
not
only
performant
functional
but
also
look
good
across
multiple
devices.
In
multiple
scenarios,
progress
has
also
been
made
in
cross
browser
compatibility
now
with
a
lot
of
modern
web
browsers,
sharing
the
same
rendering
engines.
A
A
A
Typically,
for
performance
and
security
reasons,
all
the
business
logic,
user
data
and
any
potentially
sensitive
information
will
be
contained
in
back-end
databases
and
exposed
to
the
front-end
via
back-end
apis.
This
can
be
a
mixture
of
internal
or
perhaps
external
third-party
back-end.
Apis,
such
as
a
payment
processor
from
a
bank
ajax,
uses
a
combination
of
technologies
to
provide
a
consistent
way
to
update
user
interfaces
without
requiring
the
full
page
to
be
reloaded.
A
Early
approaches
made
use
directly
of
the
xml
http
request
api,
which
was
useful
for
transferring
data
between
both
a
server
and
a
client
without
needing
a
full
page
refresh,
along
with
making
use
of
the
xml
format,
for
providing
a
description
of
any
request,
data
and
query
response,
as
well
as
javascript
to
sequence.
All
these
actions,
modern
approaches,
make
use
of
the
fetch
api
and
the
json
data
format
to
achieve
the
same
goals.
A
Json
is
a
lightweight
text-based
human
and
machine-readable
format
for
representing
data.
It's
useful
for
not
only
transmitting
but
also
serializing
data
and
makes
use
of
the
javascript
object.
Notation
graphql
is
a
newer
approach
to
data
fetching,
while
traditional
apis
return
done
in
a
very
specific
format.
Often
requiring
some
transformation
or
workarounds
on
the
front
end
to
make
it
useful
graphql
uses
a
specific
query
language,
allowing
clients
to
query
for
the
exact
data
they
require
in
the
format
they
required.
A
A
Therefore,
it's
important
that
applications
can
respond
to
events
that
occur
at
any
point
in
time.
The
types
of
events
that
could
occur
depend
not
only
on
the
device,
but
also
the
content
currently
available
on
the
page,
and
they
can
be
roughly
grouped
into
user
interactions
such
as
clicking
mouse
hovering
or
touch
or
school
events
on
a
device
device.
A
Typically,
the
state
of
a
front-end
refers
to
a
few
things.
The
configuration
of
user
interface
elements
that
are
currently
visible
on
the
screen
sometimes
called
the
view,
any
data
that
has
been
loaded
into
memory
or
the
application
and
actions
that
initiate
or
respond
to
the
flow
of
the
application
from
one
state
to
another.
A
There
are
many
approaches
to
managing
application.
State
and
often
new
approaches
will
result
in
a
new
framework
or
library
that
provides
some
common
patterns.
So,
for
example,
the
flux
pattern
has
been
implemented
by
both
redux
and
the
vuex
libraries,
and
it
borrows
some
ideas
from
functional
programming,
relying
on
a
separation
between
actions
to
initiate
a
change
of
state
functions
to
execute
the
relevant
data
transformations
and
views
that
update
when
changes
occur.
A
A
There
are
cons
to
this
approach,
though
particularly
the
increase
in
complexity
of
the
front-end
code
and
additionally,
they
can
cause
seo
or
search
engine
optimization
issues
such
as
making
it
harder
to
link
directly
to
the
content.
The
web
crawlers
are
interested
in
now.
Let's
talk
a
little
bit
about
some
of
the
key
tools
and
technologies
that
are
used
every
day
by
front-end
engineers,
no
matter
which
specific
framework
or
tool
frontend
engineers
choose
at
the
heart
of
it
will
be
html,
css
and
javascript.
A
Html
is
the
backbone
of
any
web
page,
providing
a
succinct
and
portable
way
to
describe
the
structure
of
a
page
and
also
markup.
The
content
for
display
by
a
web
browser
css
provides
a
powerful
way
to
specify
how
documents
are
presented.
This
can
include
changing
the
fonts,
the
colors
or
the
visual
layout
of
any
of
the
elements
in
the
page.
A
It
can
also
be
used
for
more
complex
presentation.
Logic
such
as
animations
javascript,
is
the
final
piece
of
this
puzzle,
adding
interactivity
to
web
pages.
It
provides
the
means
to
manipulate
the
html
document
or
css
styling,
while
also
reacting
to
user
interactions
or
initiating
requests
for
further
data
on
behalf
of
the
user.
A
This
has
led
to
an
explosion
of
frameworks,
libraries
and
tools
that
all
aim
to
abstract
away
some
of
the
boilerplate
and
give
front-end
engineers
more
robust
tools
to
build
applications
that
not
only
perform
well
at
scale
but
are
also
relatively
easy
to
maintain.
The
dominant
frameworks
at
the
moment
would
have
to
be
react.
Ujs
and
angular.
A
These
frameworks
have
been
popularized
for
building
single
page
web
applications
that
perform
and
scale
well.
Not
long
ago,
though
jquery
backbone,
knockout,
js
and
mootools
were
all
also
popular
frameworks.
So
it's
not
uncommon
to
come
across
older
products
that
may
have
been
built
in
these
build
tools.
Bundlers
and
task
runners
are
all
important
aspects
of
the
frontend
ecosystem.
A
They
allow
us
to
perform
actions
on
our
raw
javascript,
html
css,
as
well
as
other
assets
like
images
and
icons,
so
that
we
can
do
interesting
things
such
as
performing
transformations
in
our
code
to
prepare
it
to
be
consumed
by
a
web
browser.
They
allowed
us
to
check
for
consistency
and
adherence
to
standards.
A
A
For
example,
splitting
a
front-end
project
across
multiple
files,
organizing
a
logical
structure,
is
great
for
developers
who
maintain
a
project,
but
this
leads
to
multiple
requests
for
files
being
made
on
the
user
end,
which
can
slow
down
the
time
for
the
page
to
load.
Using
a
build
tool
such
as
webpack.
We
can
develop
across
multiple
js
files,
then
set
up
a
task
to
simply
compress
and
minify
all
these
files
into
a
single
javascript
file.
That
single
file
is
then
shipped
to
user,
and
a
single
request
can
be
made
from
the
user
and
for
this
file.
A
Common
challenges
for
front-end
engineers
include
dealing
with
performance,
so
ensuring
our
applications
work
effectively
and
efficiently,
not
only
for
users
who
are
accessing
our
application
or
website
on
a
desktop,
but
also
factoring
in
devices,
perhaps
lower
performance
or
lower
capabilities
such
as
mobiles
and
watches.
Another
challenge
is
dealing
with
framework
and
tooling,
and
also
language
churn.
A
A
A
This
can
allow
the
attacker
to
gain
access
to
sensitive
data,
such
as
security
tokens
or
the
user's
browser
history,
while
not
specific
to
frontend
engineering
supply
chain
attacks
are
starting
to
become
more
common.
This
generally
involves
compromising
open
source
libraries
or
tools
that
other
developers
rely
on
and
injecting
malicious
code.
This
malicious
code
might
then
be
accidentally
bundled
and
shipped
by
an
unsuspecting
engineer
that
may
not
have
thoroughly
inspected
the
libarby's
tools
and
frameworks.
They
depend
on
progressive
web
applications
or
pwas
aimed
to
bridge
the
gap
between
web
applications
and
native
mobile
applications.
A
Typically
native
applications
require
very
specific
languages
and
tools
for
their
development.
For
example,
ios
apps,
which
run
on
apple
devices,
are
written
in
either
the
swift
programming,
language
or
objective
c,
while
native
apps
often
provide
the
best
possible
experience
and
performance.
In
contrast,
progressive
web
applications
can
be
built
using
just
html
css
and
javascript.
A
There's
also
been
a
steady
growth
in
what
we
call
high
level
languages
for
building
web
applications.
Languages
such
as
typescript
reason
ml,
which
is
found
called
rescript
elm
enclosure
script,
provides
stricter
languages
with
additional
features
and
also
another
layer
of
safety
and
robustness
to
front-end
applications.