Web Development Flashcards
Promises vs async/await scope of asynchronism
The biggest difference I noticed between promises and async/await is the scope of the asynchronism.
https://levelup.gitconnected.com/async-await-vs-promises-4fe98d11038f
advantage of async/await over promises
https://www.freecodecamp.org/news/async-await-and-promises/
run async code that reads like synchronous
https://medium.com/front-end-weekly/callbacks-promises-and-async-await-ad4756e01d90
const makeRequest = () =>
getJSON()
.then(data => {
console.log(data)
return "done"
})
makeRequest()
const makeRequest = async () => {
console.log(await getJSON())
return "done"
}
makeRequest()
- Concise and clean
Look at how much code we didn’t write! Even in the contrived example above, it’s clear we saved a decent amount of code. We didn’t have to write .then, create an anonymous function to handle the response, or give a name data to a variable that we don’t need to use. We also avoided nesting our code. These small advantages add up quickly, which will become more obvious in the following code examples.
What is Apollo GraphQL?
What is GraphQL?
Which databases does GraphQl Use?
Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.
Thousands of developers have told us that Apollo Client excels at managing remote data, which equates to roughly 80% of their data needs. But what about local data (like global flags and device API results) that make up the other 20% of the pie? Apollo Client includes local state management features out of the box, that allow you to use your Apollo cache as the single source of truth for data in your application.
By leveraging Apollo Client’s local state functionality, you can add client-side only fields to your remote data seamlessly and query them from your components. In this example, we’re querying the client-only field isLiked alongside our server data. Your components are made up of local and remote data, now your queries can be too!
Apollo client provides support for graphql syntax
built-in integration with React
GraphQL is a query language (that’s what the “QL” stands for) for APIs and a runtime for fulfilling those queries with your existing data. Basically, it is used to load data from a server to a client – it’s a way to get data from an API into your application.
GraphQL reduces network requests by allowing us fetch or retrieve all the data we need in a single query.
The main feature of GraphQL is to be able to send a query specifying only the information you need and get exactly that.
It lets the client specify exactly what data it needs. It makes it easier to aggregate data from multiple sources. It uses a type system to describe data.
GraphQL allows making multiple resources request in a single query call, which saves a lot of time and bandwidth by reducing the number of network round trips to the server. It also helps to save waterfall network requests, where you need to resolve dependent resources on previous requests.
see [Online] ReactJS Monthly Meetup
Building with Apollo and GraphCMS
This is a misconception, GraphQL is a query language for APIs - not databases. In that sense it’s database agnostic and can be used with any kind of database or even no database at all.
GraphQL is a query language and server-side runtime for application programming interfaces (APIs) that prioritizes giving clients exactly the data they request and no more. GraphQL is designed to make APIs fast, flexible, and developer-friendly.
CI/CD
- CI - build and test
- CDelivery - deployment
collection of practices that enable application development teams to deliver code changes more frequently and reliably.
CI is a software development practice where members of a team integrate their work frequently, usually each person integrates at least daily
Each integration is verified by automatic build, including test
Integration is when feature branch is merged with the main branch.
But CD can either mean continuous delivery or continuous deployment.
Building means starting with source files produced by developers and ending with things like installation packages that are ready for deployment.
Once developers have written code for a site, they need to place that code on the web servers. It’s called code deployment.
Github actions Automate your GitHub workflows
Github Actions enables you to create custom software development lifecycle workflows directly in your Github repository. These workflows are made out of different tasks so-called actions that can be run automatically on certain events.
headless cms
graphcms vs netlifycms
A headless CMS is a content management system that provides a way to author content, but instead of having your content coupled to a particular output (like web page rendering), it provides your content as data over an API. … These are usually called “Headless” or “API-first” CMSes.
GraphCMS is a GraphQL Based Headless Content Management System. It lets you build a hosted GraphQL backend for your apps and gives you all the tools you need to manage your content;
Netlify CMS: Open source content management for your Git workflow. It is built as a single-page React app.
ngrok
what is localhost
share your localhost with other developers,
what is localhost? https://www.youtube.com/watch?v=ahYgoV8MDtg
allows to channel your localhost into a temporary url update real time, it will auto refresh 4 easy steps on the website ./ngrok http 3000 gives you public url anyone can access has a lot of features - see docs
https://www.youtube.com/watch?v=DCxt9SAnkyc&t=307s&ab_channel=Pentacode
What is async javascript?
Asynchronous code = code that can start now and finish later
Blocking code = statement that fetches data stalls the program, it blocks next statement from running until it’s complete
https://www.youtube.com/watch?v=ZcQyJ-gxke0
You give that statement a callback that can complete when data comes back
Async fun - browser takes request and handles it outside of the scope of the single thread in another part of the browser
Puts callback to the side too
Network request is now outside of the thread, so the js can carry on down the queue
The data request is still going on on the side
Simplistic explanation - look into event queue and call stack to go deeper
setTimeout to emulate a network request is non blocking and asynchronous
API endpoints
API endpoints are urls that server exposes to us to make network requests to for data
callback
When you need to execute code after something has happened, not sequentially
Asynchronous
Callbacks
Function that is evoked when something else happened
Achieved by passing in a function into function that is called back after something is executed
This is possible bc js supports higher order functions
Anonymous fs are defined at the time they are passed in
In a setTimeout you can call the name of the function or define the function within
Callbacks are passed in to event listeners, they only are called after an event happens
For example when a click event happens on that function
Take a data, and only perform callback on the ones that of type east/
example:
students data with student name, score, and school
let processStudents = function(data, callback){
loop through the data and if element === east
callback(el)
}
processStudents(students, function(obj){
if score is more than 60, console.log passed
})
ESlint
Linting is the automated checking of your source code for programmatic and stylistic errors. This is done by using a lint tool (otherwise known as linter). … The term linting originally comes from a Unix utility for C. There are many code linters available for various programming languages today. Did you mean: what does eslint do
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
code coverage
Code coverage is the percentage of code which is covered by automated tests. Code coverage measurement simply determines which statements in a body of code have been executed through a test run, and which statements have not. … Code coverage is part of a feedback loop in the development process.
what is react native web?
This is exactly the problem the React Native for Web project is trying to solve. Instead of forcing you to maintain two separate code bases for your mobile and web apps, or making a hybrid app, with all its compromises.
React Native for Web is intended to let you write a single app that runs in a browser using standard web technologies, or on iOS and Android as a real native mobile app.
Minimizing Security Risks when designing your app
a lot of developers think of security as an add on that’s done after
can you always see from the outside if the data is security
equifax is popular for trustful security
breached in 2017, now have they have best security team
vulnerability was known for 2 years
usual tools and frameworks
I don’t want to scan my code every time I push in production
invest in automating
how to prevent injections?
learn basics of security while learning how to code
your security scans will come back bad, you’ll have to rewrite it so it’s compliant
security is parallel to functionality
depends how much time
can you do audit log separate from application log
active monitoring so you can shut it down as it’s happening
mechanism of forensics, if you detect it early
have relevant data for forensics to take place
don’t argue that breach will happen, just prepare for it
it’s a matter of when
impersonating ceo
with ai it’ll be a problem
people are getting creative
When to use React Expo?
no xcode/android studio * no headaches with deployment certificates or configurations OTA * publish over the air * no need to re-approval for updates Seamless deploy * 2 commands to deploy Push notifications * Freedom to choose, no firebase push notifications Native code * Usually no access to native code Too much magic * Maybe training wheels not needed?
you can always exit expo and continue in cli, you loose simplicity if you do that
all when you run through Xcode something fails in build, but expo eliminates all of that and your app is in the store
What is GatsbyJS?
Progressive web app
GatsbyJS, on the other hand, is a static progressive web app (PWA) generator that offers code and data splitting out of the box. To boost performance, GatsbyJS loads only critical HTML, CSS, JavaScript, and other data. Once loaded, it prefetches resources for other pages you might navigate to.
React is a library that is meant to provide a certain set of core functionality for developers to leverage. It is intended to be lightweight and broadly applicable.
Gatsby, on the other hand, is, “a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.”
Gatsby is a static site generator that leverages React.
Progressive web apps are websites that look and feel like an app. This means users can access all information and capabilities without downloading a mobile app. Instead, progressive web apps use modern web technology to deliver app-like experiences to users, right in their browsers.
Important to read every time: https://www.actminds.com/blog/pwa/
