CS – Web Dev

Making an MVP
https://www.youtube.com/watch?v=7JnWfDczo-8

index.html
 compressed React JS files
style.css & bundle.js
 style file and our js file (both bundled by our extra tools)
index.jsx app.jsx hello.jsx
 react files written in jsx. Passed into Babel converger to normal js. Webpack (module
bundler) converts it to something our browser can understand. Webpack can only
understand normal js
jQuery
 when talking to backend from frontend, you’re using jquery to do http requests, asking
server for a new type of a load
Python Flask and Python

FRONT END
Components (index.jsx, App.jsx, Hello.jsx) of website live in React. They are passed into
the Babel converger. This converts to normal javascript. Webpack then converts this to what
our browser can understand (since Webpack only understands js). Attach these things to
browser.
bundle.js and style.css is bundled by extra tools.

BACK END
library jquery to do http requests. server interaction
Flask

FOLDER STRUCTURE
static is front-end that holds js, webpack, babel

 README.md
 fullstack_template/
o server/
o static/
 css/
 dist/
 images/
 js/
LET’S DO FRONT END
We need Javascript Package Manager (like brew, pip, pacman)
CS – Web Dev

Manages packages
Don’t have to worry about downloading new version of package, making sure we have
the right dependencies.
Painless to keep project dependencies up to date. And to fetch and install new
packages

NPM (Node Package Manager)

has ~0.5M packages. “safe” option that isn’t just going to be deprecated in 2 months
initialize npm:
$ npm init
follow the defaults and it creates a package.json file that ends up in static/
directory

PACKAGE.JSON
1. Keeps track of dependencies and versions
2. Informs other developers about your project
3. Makes installing, running, and updating a project automatic and reproducible
4. what keywords are relevant to the project

WE NEED A MODULE BUNDLER

 minimizes the number of <script> tags in your HTML
o faster loading and less hassle
 don’t need to worry about bundle import ordering
 don’t have to use globals or namespacing
 bundles our dependencies. give it a depency -> creates a dependency tree of all
your dependencies… attach this bundled .js to html (this is 1 script tag for 1 entry
point)
 Will use Webpack for this

WEBPACK
 only understands JavaScript
o everything else needs a loader or plugin (like files, background image, CSS)
 everything is a module  you can attach things and require() JavaScript, background
image, …. (this is powerful)
 integrates seamlessly with npm

BABEL
allows us to write in next gen js before it becomes browser standard
by installing es2015 and react presets, converts js and react jsx  js syntax

….

We’re going to add React to this

CS – Web Dev

 allows you to build small component-ties to UI

 reusable components
 makes it easy to do repetitive things instead of re-writing code
 easy to re-render components on change

*install react

ReactDOM means we’re displaying things with react.

JS allows you to use custom HTML tags with your own classes

REACT
always need to import react to use it
always need to export your classes to be able to import them somewhere else
best practise to have 1 class per file. means we can have ‘export default’

JSX?
it’s a syntax extension to JavaScript
Can use HTML and XML tags in JS
Can use custom classes directly in JS code
So let’s you write <Hello name=”Rimini” /> instead of React.createElement(Hello,
{name:”Rimini”},null)

SERVER
Pyramid is great if you want full flexibility and custom config
between your environments. Django is great if you want a web
framework packed full of features, and don’t want to spend some
time initially customising your application choices, like which
database to use.

WEB ASSEMBLY JAVASCRIPT

Why do we need abstractions?
1) Computers are a series of tubes piping electrons across tiny tiny pieces of metal.
We take these electrons and pipe them in just the write way to do math. Incredible!!!

2) Machine code.
3) Assembly
4) Lower level stuff like C with *, free, malloc, type int
5) Thinking about just vars and data structures
CS – Web Dev

visual languages like Unity

ASM.JS is a subset of JS that will compile down more efficiently in the browser
specifically. There are no types in JS.
barriers in these loosely typed languages are figuring out the type of vars

WAST: Webassmebly abstract syntax tree

Browsers (and node…node runs on V8 & chrome has v8) can transform really
efficiently. WAST is a shared target for copmilers…. any language can be compiled to a shared
AST that can be transformed into assembly more efficnently.

take .js, load it as a js module.

VOCAB
 Lisp
 Json
 RESTful
o representational state transfer .. apps should use http as it was originally
envisioned
o GET requests should be idempotent
o alternatie to SOAP based data exchange
o provides a definition of a “resource”
 http is a representation of a resource
 resources are concepts
 URLs tell a browser there’s a concept somewhere and a browser can then
go ask for a specific representation of a concept. (specifically the web
page respresentation)
o in most cases a resources has only a single representation. representations one
of those things that don’t get used a lot. hopefully in the future there’s a bunch
of new formats popping up..for example, “web services.” it means a lot of
different things. basically it means machines can use the web like people do
meaning computers can use the same protocols to send messages back and forth
to each other
o http://web.archive.org/web/20130116005443/http://tomayko.com/writings/res
t-to-my-wife
 GraphQL
o building early server side code to implement the graphql protocol is a pain
o open standard (easier to consume for client application)
 idempotent
CS – Web Dev

o the property of certain operations in mathematics and computer science, that

can be applied multiple times without changing the result beyond the initial
application
o closure under absolute value like abs(abs(v))… also in functional programming
(referential transparency)
 clients (browsers)
 Swift
 Objective C
 Tooling
 Expo
o tools built on top of react native that work across both iOS and android
 Native code
o code compiled to run with a particular processor (i.e. a logic circuitry that
responds and processes instructions) and its set of instructions

Web development started with the LAMP stack (Linux, Apache, MySQL, PHP). Now everybody’s
making these single page applications in the front end and they have a mobile app with maybe
electron and a web client. And in the backend, everything’s being broken up into microservices.
There’s not just a single stack anymore…

In apps now, the user interacts with the content which means the user and the content
are suddenly stateful b/c you need to match the user edits on the client, provide a fast
response, the user can navigate around the web app. server is stateful b/c its data is changing
and if you want real-time update, you need to know who’s the user and which data they’re
interested in.

graphql provided a standard on top of which you can build a client that worked for any
back end compatible with any view layer. this is Apollo… Apollo handles the data, you build the
app. so you don’t worry about where the data comes from, (if it was fetched from a database or
a rest api). it handles data loading and even UI consistency as much as possible.

 React Native
 Redox
 Ember
 View

Angular (as an alternative to React)

MVC

REST is protocol independent and is an architectural style

Now for example I have to send a Telegram and we all know that the cost of the telegram
will depend on number of words.
CS – Web Dev

So tell me among below mentioned these two messages, which one is cheaper to send?
<name>Arin</name>
or

"name": "Arin"
I know your answer will be second one although both representing the same message
second one is cheaper in terms of cost.

So I am trying to say that, sending data over the network in Json format is cheaper than
sending it in Xml format in terms of payload.
Here is the first benefit or advantages of REST over SOAP. SOAP only support XML, but
REST supports different format like text, JSON, XML etc. And we already know, if we use
Json then definitely we will be in better place in terms of payload.

1. SOAP can't use REST because it is a protocol. REST can use SOAP web services because it is
a concept and can use any protocol like HTTP, SOAP.
2. SOAP uses services interfaces to expose the business logic. REST uses URI to expose
business logic.

REST PRINCIPLES:
Fundamental REST Principles
Client-Server Communication
Client-server architectures have a very distinct separation of concerns. All applications built
in the RESTful style must also be client-server in principle.

Stateless
Each client request to the server requires that its state be fully represented. The server
must be able to completely understand the client request without using any server context
or server session state. It follows that all state must be kept on the client.

Cacheable
Cache constraints may be used, thus enabling response data to be marked as cacheable or
not-cacheable. Any data marked as cacheable may be reused as the response to the same
subsequent request.

Uniform Interface
All components must interact through a single uniform interface. Because all component
interaction occurs via this interface, interaction with different services is very simple. The
interface is the same! This also means that implementation changes can be made in
isolation. Such changes, will not affect fundamental component (things that manipulate
resources) interaction because the uniform interface is always unchanged. One
disadvantage is that you are stuck with the interface. If an optimization could be provided to
a specific service by changing the interface, you are out of luck as REST prohibits this. On
the bright side, however, REST is optimized for the web, hence incredible popularity of
REST over HTTP!
CS – Web Dev

The above concepts represent defining characteristics of REST and differentiate the REST
architecture from other architectures like web services. It is useful to note that a REST
service is a web service, but a web service is not necessarily a REST service.