Hexagon Interview includes react, Redux,

Composer (Windows)

Composer creates and modifies window script files with a graphical user interface, enabling you to do the following: Interactively design windows and input windows Save your design to a script file Read and modify existing script files Compile window scripts, storing the definitions into a window library Composer is available on Windows only.

componentWillUnmount()

A component's unmounting period occurs when the component is removed from the DOM. This could happen if the DOM is rerendered without the component, or if the user navigates to a different website or closes their web browser. componentWillUnmount is the only unmounting lifecycle method! componentWillUnmount gets called right before a component is removed from the DOM. If a component initiates any methods that require cleanup, then componentWillUnmount is where you should put that cleanup.

AngularJS

An open-source JavaScript library maintained by Google and the AngularJS community that lets developers create what are known as Single [web] Page Applications. AngularJS is popular with data scientists as a way to show the results of their analysis.

Node.js

An open-source, cross platform JavaScript runtime environment designed to be run outside of browsers Basically it is a JavaScript outside of the browser Node.js makes it possible to write applications in JavaScript on the server. It's built on the V8 JavaScript runtime and written in C++ — so it's fast. Originally, it was intended as a server environment for applications, but developers started using it to create tools to aid them in local task automation. Since then, a whole new ecosystem of Node-based tools (such as Grunt, Gulp and Webpack) has evolved to transform the face of front-end development.

By dispatching an action (dispatch(action))

What is the only way to change the state inside of the store?

shouldComponentUpdate()

When a component updates, shouldComponentUpdate gets called after componentWillReceiveProps, but still before the rendering begins. shouldComponentUpdate automatically receives two arguments: nextProps and nextState. The best way to use shouldComponentUpdate is to have it return false only under certain conditions. If those conditions are met, then your component will not update.

Before an action is dispatched.

When should API calls or router transitions happen within redux?

Store

__________ holds the whole state tree of your application

Redux

____________ is a predictable state container for Javascript apps

Reducers

________________ describe how the app's state changes in response to an action.

Reducers

___________________ take existing state from the Redux store, pulls in our bundle of information sent from the Action Creators and returns a new state that gets updated in the Redux store. Redux then passes that new state to any components that need to know about it which triggers the React engine to re-render the component.

action creators

____________________ (two words) receive data from a DOM event and return a specific action formatted as a JS object.

React

a frontend library used to build user interfaces. It takes care of what is displayed to the user and how they interact with your application. React is designed so that when the data in your app changes, your user interface will automatically update, without you needing to worry about manually updating the DOM.

componentDidMount()

a lifecycle method that is triggered as soon as the component is mounted (i.e., it becomes part of the DOM).

object destructuring

a new way of assigning values contained in objects and arrays to new variables. In this course, we will use object destructuring: const myObj = {a: 'apple', b: 'bumblebee', c: 'cat'} const {a, c} = myObj; console.log(a); // => apple console.log(c); // => cat

nextProps

a preview of the upcoming props object that the component is about to receive.

createElement()

an Element Node with the specified name. Tip: After the element is created, use the element.appendChild() or element.insertBefore() method to insert it to the document.

appendChild()

appends a node as the last child of a node.

Lifecycle Methods

are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM (mounting), when the component updates, and when the component gets unmounted or removed from the DOM.

propTypes

attribute of the component is set to an object that maps the names of the props to their types.

Components

can represent any part of your user interface. For example, if you were looking to create a competitor for Google Maps, you might have a Map component for viewing the map, and a LocationInput component that would allow users to enter a location.

componentWillReceiveProps()

comparing incoming props to current props or state, and deciding what to render based on that comparison.

presentational components

components that receive data from container/smart/stateful components and render themselves accordingly.

Hexagon PPM (Process, Power & Marine)

focused on delivering end-to-end information technology solutions that drive efficiencies during the design, construction and operation of industrial facilities and large-scale construction projects

Hexagon PPM recent acquisitions

including project controls technology (EcoSys) and fabrication automation technology (NESTIX Oy), and the recently launched HxGN SMART Build solution targeted at enterprise BIM construction execution for the AEC industry, are enabling Hexagon PPM to diversify its customer base.

.isRequired

indicates that the prop must be supplied or have a default set, otherwise a warning will be logged. If you don't append .isRequired then the prop will be optional.

insertBefore()

inserts a node as a child, right before an existing child, which you specify.

Tasks

npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can't go back!

ES6

refers to version 6 of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript, and version 6 is the next version after version 5, which was released in 2011. ... ECMAScript, or ES6, was published in June 2015. It was subsequently renamed to ECMAScript 2015.

componentDidUpdate()

usually used for interacting with things outside of the React environment, like the browser or APIs. It's similar to componentWillUpdate in that way, except that it gets called after render instead of before. automatically gets passed two arguments: prevProps and prevState. prevProps and prevState are references to the component's props and state before the current updating period began. When a component instance updates, componentDidUpdate gets called after any rendered HTML has finished loading.

Saas

vendor hosts the software online and user accesses and uses the software over the internet

action creators

when an event fires, ________________________ gather and organize any extra information needed to make changes to state and pass it on in a neat little bundle to the reducer

Uncontrolled Components

where form data is handled by the DOM itself. To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.

What will the UX intern do>?

will work with senior programmers on the UX team to implement toolkit components in support of Hexagon PPM products. She or he will work with domain experts, product owners, software engineering, project management, UX designers, and a cross-functional team of UX professionals.

mapStateToProps

If __________________ is passed into connect(), the component will subscribe to Redux store updates.

reducers

In Redux, __________________ are a group of functions that change states by taking an action as an argument and then returns a new state.

action

In Redux, a/an _____________ is a command to change the state

Company President

Mattias Stenberg

1. You call store.disptach(action) 2. The action reaches the reducer function 3. The reducer updates the state 4. Any Subscribers are notified of the change through the props passed in

Name the 4 steps of the lifecycle in any Redux app

Advantages of SaaS

No *maintenance cost* Provide help in cases of *malfunction* Maintenance and *updates managed* by software manufacturer Client enjoys the *professional* know how of software manufacturer (MC, M, M&U, P) --saves money, avoids accounting and corporate finance implications, highly scalability, higher quality and service level --Low cost, few investment in installation and maintenance, compatible with different types of devices, require few IT personnel, and it is safer.

ReactJS

JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded

Babel

JavaScript transpiler used by the build system. Transpilers take code written in a certain language (or version of a language), and convert it into valid code in a different language. React EX: Taking code written using ES6 syntax, and converting it into code that is compatible with ES5 Convert React's JSX syntax into vanilla JavaScript code

Proto

Proto performs all the actions that Script does, except that it also enables you to interactively process window scripts. Proto lets you display windows, too. Using it, you can do the following: Load (from a window library file) and view menu columns and windows Test menu columns and windows Create and update window libraries Prototype display renditions Edit key map definitions

Middleware

What do you use to help with async actions in Redux?

connect

What function hooks together the Redux states and Smart Components(in react)?

By dispatching actions.

What is the only way to change the app's state?

SaaS advantages: Scalability

- SaaS providers generally offer many subscription options and flexibility to change subscriptions as and when needed, eg when your business grows, or more users need to access the service.

Disadvantages of SaaS

--Lack of control - in-house software application gives businesses a higher degree of control than hosted solutions where control resides with a third party. Typically everyone has to use the latest version of the software application and cannot defer upgrades or changes in the features. --Security and data concerns - access management and the privacy of sensitive information is a major consideration around cloud and hosted services. --Limited range of applications - while SaaS is becoming more popular, there are still many applications that don't offer a hosted platform. --Connectivity requirement - since the SaaS model is based on web delivery, if your internet service fails, you will lose access to your software or data --Performance - SaaS may run at somewhat slower speeds than on-premise client or server applications, so it's worth keeping performance in mind your software isn't hosted on a local machine.

jQuery

--a library of JavaScript programs designed for easy integration onto a webpage. --A free and open source JavaScript library that is used by Web developers to navigate HTML documents, handle events, perform animations and add Ajax interactions to Web pages.

container or smart/stateful component

A _________________ passes data to the presentational component, making the connection between the Redux store and the presentational components that need to be rendered.

SaaS examples:

BigCommerce, Google Apps, Salesforce, Dropbox, MailChimp, ZenDesk, DocuSign, Slack, Hubspot.

connect( )

How do all child components of the Provider obtain store?

combineReducers

How do you create a single reducer out of many reducers?

import the Provider component from the react-redux package and wrap our root component within it

How do you use React and Redux together?

Through the Provider

How does 'connect' get the 'store'?

by immutably maintaining the state

How does Redux make debugging apps easier?

By grouping async behavior in a middleware, the need to write duplicate logic is eliminated.

How does middleware help with async behavior?

ECMAScript

It is a scripting language, javaScript has remained the best-known implementation of ECMAScript since the standard was first published, --a standard script language; helps ensure more consistency across Netscape, Microsoft, and any other Web script implementations

What is SaaS web application?

Software as a service (SaaS) is a software distribution model in which a third-party provider hosts applications and makes them available to customers over the Internet. SaaS is one of three main categories of cloud computing, alongside infrastructure as a service (IaaS) and platform as a service (PaaS).

the spread operator

The Object.assign method helps us manage merging objects, and we'll use it throughout this course. Properties from objects passed as the second, third, fourth, etc. arguments are merged into the object passed as the first argument. Properties of later arguments will overwrite properties with the same name from earlier arguments. const objA = { foo: 'foo', bar: 'bar' }; const objB = { foo: 'something else', bizz: 'bizz', bang: 'bang' }; console.log(Object.assign({}, objA, objB)); // => {foo: "something else", bar: "bar", bizz: "bizz", bang: "bang"}

store

The Redux __________ manages all states in the app.

Script

The Script program processes all forms of window script files, batch-style, to generate windows. In one step, it does the following for you: Reads and interprets the script Converts window and column scripts into window and column definitions Stores the definitions into a window library

what does UI toolkit environment establish?

The UI Toolkit environment establishes and maintains input, prompts, messages, menus, help, and other user interface details—so you don't have to write such code yourself. Toolkit utilities handle the user-interface details for you and ensure consistency throughout your application.

Window debugger

The UI Toolkit window debugger gives you information and the current status of the windowing environment. Using the debugger you can view the following: Any loaded window Any environment level General information about loaded windows and open channels List and file-stack information Detailed information about a specific window

State

The state is an object that is stored as part of a component and can be updated by the component itself. Only stateful components can contain state. Stateless components can only be manipulated by changing the props passed to them. For example, a stateful component for an email would store the sender, recipient, and content of the message within the component. Whereas the stateless equivalent would need to have that information passed to it from a parent component.

Unidirectional data flow

The concept that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand.

.map()

The map() method calls the provided function once for each element in an array, in order.

middleware

The middleman between store.dispatch() and a reducer. It intercepts an action that has been dispatched and can modify or cancel the action before it reaches the reducer

Object.assign

The spread operator provides a compact way to apply parameters to functions. function calcVolume(width, height, depth) { return width * height * depth; } const values = [10, 20, 30]; console.log(calcVolume(...values)); // => 6000 const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const array3 = [...array1, ...array2]; console.log(array3); // => [1, 2, 3, 4, 5, 6]

mapDispatchToProps

This function takes a set of action creators and makes them "dispatchable". It then passes the object to components as a prop.

property value shorthand

This is a convenient shorthand you can use when you need to create an object literal out of a set of variables, and you want to map variable names to keys. It is essentially the inverse of object destructuring. // in es6 const x = 1; const y = 2; const myObj = {x, y} console.log(myObj); // => { x: 1, y: 2 } // equivalent to this in es5 var x = 1; var y = 2; var myObj = {x: x, y: y};

How to use UI Toolkit

To use UI Toolkit, you first create a user interface window script file with Composer or a text editor. Next, you compile the script file with one of Toolkit's utility programs: Composer, Proto, or Script. These utility programs build the windows and store their definitions in a window library file. (Proto also allows you to preview your window script.) In the final step, you write a Synergy program that calls Toolkit routines. Figure 1 illustrates this basic procedure.

constructor()

Typically, in React constructors are only used for two purposes: Initializing local state by assigning an object to this.state. Binding event handler methods to an instance. The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs. If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component.

UI Toolkit components

UI Toolkit contains three utility programs: Composer, Script, and Proto.

UI Toolkit

UI Toolkit is a set of routines and utility programs that gives you the tools you need to create user interfaces for your applications. Toolkit helps you provide a user interface that is easy to use and includes the following: Color Drop-down menus Cascading menus Pop-up help Ability to run in Windows environments ActiveX controls Tabbed dialogs Composite windows (parent/child windows)

what does UI Toolkit support?

UI Toolkit is structured to support large applications. Its design assumes that the major functions of your application will be supported by individual routines, while the main routine will consist primarily of a small decision apparatus that makes the appropriate calls to these routines. These routines and programs interact with window library files that UI Toolkit creates when it processes the script files you have written.

A strict unidirectional data flow

What concept does Redux architecture revolve around?

Webpack

Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporate assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file. Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one (or more) bundles. With plugin "loaders" Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files. We determine what Webpack does and how it does it with a JavaScript configuration file, webpack.config.js.

mapStateToProps

What Redux function filters the results of Redux states into something that a smart component needs, and then passes those into that component as a prop?

What is git Version Control?

is a system that records changes to a file or set of files over time so that you can recall specific versions later. For the examples in this book, you will use software source code as the files being version controlled, though in reality you can do this with nearly any type of file on a computer. If you are a graphic or web designer and want to keep every version of an image or layout (which you would most certainly want to), a Version Control System (VCS) is a very wise thing to use. It allows you to revert selected files back to a previous state, revert the entire project back to a previous state, compare changes over time, see who last modified something that might be causing a problem, who introduced an issue and when, and more. Using a VCS also generally means that if you screw things up or lose files, you can easily recover. In addition, you get all this for very little overhead.

CSS3

is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

Mission Statement

is the world's leading provider of enterprise engineering design software and project control solutions. By transforming unstructured information into a smart digital asset, our clients are empowered to visualize, build, and manage structures and facilities of all complexities, ensuring safe and efficient operation throughout the entire life cycle. PPM is part of Hexagon (Nasdaq Stockholm: HEXA B; hexagon.com), a leading global provider of information technology solutions that drive productivity and quality across geospatial and industrial landscapes.

mount

it becomes part of the DOM.

They're a leader at what?

leading global provider of engineering software and project control solutions.

componentWillUpdate()

main purpose of componentWillUpdate is to interact with things outside of the React architecture. If you need to do non-React setup before a component renders, such as checking the window size or interacting with an API, then componentWillUpdate is a good place to do that. componentWillUpdate gets called in between shouldComponentUpdate and render. componentWillUpdate receives two arguments: nextProps and nextState.

this.loadBoard()

makes the AJAX request to the server to load

textContent()

returns or sets the text from the selected element. On returning text, this property returns the value of all text nodes within the element node. On setting text, this property removes all child nodes and replaces them with a single text node.

getElementById()

returns the element that has the ID attribute with the specified value.

className()

sets or returns the class name of an element (the value of an element's class attribute).

Props

short for properties; are attributes of a component that work in much the same way as the HTML attributes that you are used to.

Build systems

software tools designed to automate the process of program compilation. Their primary goal is to efficiently create an executable. pieces of software designed to help with coordination; they are responsible for building your code so that it is ready to be run or deployed.

Virtual DOM

stores a copy of your current DOM in memory. When your app's data changes, it calculates which parts of the DOM need to be altered, and only updates these elements.

what is HTML5

the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. HTML5 has been designed to deliver almost everything you'd want to do online without requiring additional software such as browser plugins. It does everything from animation to apps, music to movies, and can also be used to build incredibly complicated applications that run in your browser.

What do they transform?

transform unstructured information into a smart digital asset, empowering our clients to visualize, create, and manage the life cycle of facilities and structures of all complexities

Controlled Components

typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

stateful components

used to store the component's state (i.e. the values that describe what the contents and behavior of the component should be, and can change over time).